Image Clip Reveal
Images wipe into view with an animated clip-path while the inner image settles from 1.25 scale, a Ken Burns settle on scroll
01
Editorial Grid
A 2x2 grid inside a data-clip-reveal-group container. Each image sets its own data-reveal-direction and the group staggers them into sequence. Scroll down to trigger the reveal.
'/%3E%3Ccircle%20cx='620'%20cy='170'%20r='180'%20fill='rgba(255,255,255,0.1)'/%3E%3Ccircle%20cx='190'%20cy='460'%20r='110'%20fill='rgba(0,0,0,0.15)'/%3E%3Ctext%20x='48'%20y='548'%20font-family='monospace'%20font-size='40'%20fill='rgba(255,255,255,0.8)'%3E01%3C/text%3E%3C/svg%3E)
'/%3E%3Ccircle%20cx='620'%20cy='170'%20r='180'%20fill='rgba(255,255,255,0.1)'/%3E%3Ccircle%20cx='190'%20cy='460'%20r='110'%20fill='rgba(0,0,0,0.15)'/%3E%3Ctext%20x='48'%20y='548'%20font-family='monospace'%20font-size='40'%20fill='rgba(255,255,255,0.8)'%3E02%3C/text%3E%3C/svg%3E)
'/%3E%3Ccircle%20cx='620'%20cy='170'%20r='180'%20fill='rgba(255,255,255,0.1)'/%3E%3Ccircle%20cx='190'%20cy='460'%20r='110'%20fill='rgba(0,0,0,0.15)'/%3E%3Ctext%20x='48'%20y='548'%20font-family='monospace'%20font-size='40'%20fill='rgba(255,255,255,0.8)'%3E03%3C/text%3E%3C/svg%3E)
'/%3E%3Ccircle%20cx='620'%20cy='170'%20r='180'%20fill='rgba(255,255,255,0.1)'/%3E%3Ccircle%20cx='190'%20cy='460'%20r='110'%20fill='rgba(0,0,0,0.15)'/%3E%3Ctext%20x='48'%20y='548'%20font-family='monospace'%20font-size='40'%20fill='rgba(255,255,255,0.8)'%3E04%3C/text%3E%3C/svg%3E)
02
Full-Width Replay
A standalone full-width image with a slower left wipe and data-reveal-once="false", so it replays every time it re-enters the viewport. Scroll past it and back to watch it run again.
'/%3E%3Ccircle%20cx='1240'%20cy='180'%20r='220'%20fill='rgba(255,255,255,0.1)'/%3E%3Ccircle%20cx='320'%20cy='500'%20r='140'%20fill='rgba(0,0,0,0.15)'/%3E%3Ctext%20x='56'%20y='584'%20font-family='monospace'%20font-size='44'%20fill='rgba(255,255,255,0.8)'%3E05%3C/text%3E%3C/svg%3E)