Clip reveal

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The frame owes itself a size: the picture fills the frame, so give the box a ratio or a height, and the image width: 100%, height: 100% and object-fit: cover. A border-radius on the frame is carried inside the clip while it opens. Before the script runs, a marked frame is hidden with visibility and keeps its room; it shows by itself after four seconds if the script never comes, and at once without JavaScript, through the noscript line the paste carries inside its Embed.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-clip-reveal="up"	the frame opens from its bottom edge upwards, and this is what an empty value does
   data-clip-reveal="down"	it opens from its top edge downwards
   data-clip-reveal="left"	it opens from its right edge leftwards, the rule standing upright
   data-clip-reveal="right"	it opens from its left edge rightwards
   data-clip-reveal="center"	it opens outwards from its middle, and the rule is the outline of the window
   data-clip-reveal-media	Marks the element that takes the counter scale inside a frame, a wrapper around the picture for instance. It takes no value. Without it the first img, video, picture, canvas, iframe or svg of the frame is taken; a frame with none still opens, without the scale. [ Optional ]
   data-clip-reveal-state	Written by the engine on the frame: ready while it waits closed, playing, done once open, static under reduced motion. Never written by hand. [ Optional ]

   The value is optional: left empty, the frame opens up. The direction is a setting of the table below as well, and the value written here wins over it. The attribute goes on the box that holds the picture, never on the image itself.
   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-clip-reveal-color	#ffab1a	Colour of the rule that leads the edge, the accent of the page. Options: any CSS colour.
   data-clip-reveal-direction	up	The way the edge travels. The value written on data-clip-reveal itself wins over this key. Options: up, the frame opens from its bottom edge upwards; down, from the top; left, from the right edge leftwards; right, from the left; center, outwards from the middle, the rule drawn as the outline of the window.
   data-clip-reveal-duration	1.1	Time a frame takes to open, in seconds, on an exponential out curve; the scrubbed opening ignores it.
   data-clip-reveal-scale-from	1.2	Scale the picture starts at inside the frame, coming back to 1 on the same curve as the clip.
   data-clip-reveal-stagger	0.09	Gap between the starts of two frames that come into view together, in seconds, in the order of the page.
   data-clip-reveal-rule-width	1	Thickness of the accent rule, in px.
   data-clip-reveal-offset	0.12	Share of the window height the top of a frame has to clear, from the bottom, before it plays, 0 to 0.9.
   data-clip-reveal-once	true	Whether a frame opens one time and stays open. Options: true, one opening and the frame is left alone; false, the frame closes once it is fully out of the window and opens again the next time, and a scrubbed frame follows the scroll both ways.
   data-clip-reveal-scrub	false	Whether the scroll drives the opening instead of the clock. Options: false, the frame plays by itself as it comes into view; true, the opening follows the scroll over six tenths of the window height, linear and lightly smoothed, with no stagger.

Two files and their pictures (6), no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call ClipReveal.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-clip-reveal-color	#ffab1a	Colour of the rule that leads the edge, the accent of the page. Options: any CSS colour.
   data-clip-reveal-direction	up	The way the edge travels. The value written on data-clip-reveal itself wins over this key. Options: up, the frame opens from its bottom edge upwards; down, from the top; left, from the right edge leftwards; right, from the left; center, outwards from the middle, the rule drawn as the outline of the window.
   data-clip-reveal-duration	1.1	Time a frame takes to open, in seconds, on an exponential out curve; the scrubbed opening ignores it.	Under 0.7 the opening reads as a snap and the long deceleration is lost	Past 1.6 the last third looks stalled, since the curve spends it on a few pixels
   data-clip-reveal-scale-from	1.2	Scale the picture starts at inside the frame, coming back to 1 on the same curve as the clip.	At 1 the picture stands still and only the frame opens	Past 1.3 the picture visibly zooms out, and a small picture shows its pixels at the start
   data-clip-reveal-stagger	0.09	Gap between the starts of two frames that come into view together, in seconds, in the order of the page.	At 0 a row opens as one block	Past 0.15 a row of four reads as a slow queue
   data-clip-reveal-rule-width	1	Thickness of the accent rule, in px.	At 0 no rule is drawn at all	Past 2 the rule reads as a bar and takes over the picture
   data-clip-reveal-offset	0.12	Share of the window height the top of a frame has to clear, from the bottom, before it plays, 0 to 0.9.	At 0 a frame opens the moment its first pixel is in the window	Past 0.3 a frame opens when it is already well up the screen, and a short page may never get it there
   data-clip-reveal-once	true	Whether a frame opens one time and stays open. Options: true, one opening and the frame is left alone; false, the frame closes once it is fully out of the window and opens again the next time, and a scrubbed frame follows the scroll both ways.
   data-clip-reveal-scrub	false	Whether the scroll drives the opening instead of the clock. Options: false, the frame plays by itself as it comes into view; true, the opening follows the scroll over six tenths of the window height, linear and lightly smoothed, with no stagger.

2. Drive it from JavaScript

   When frames arrive after the page has loaded, when a frame has to open from code, or when the page reacts to a frame landing.
   JavaScript Expand Copy

   const element = document.querySelector('[data-clip-reveal]');
   element.addEventListener('clip-reveal:done', (e) => {
     console.log(e.detail);
   });
   
   const frame = ClipReveal.mount(element);   // the frame auto() mounted, or a new one
   frame.replay();   // closed, then opened again if it is in view
   frame.show();     // open at once, no motion
   
   // Start a video only once its frame opens.
   element.addEventListener('clip-reveal:start', () => element.querySelector('video')?.play());
   
   // Frames added after the page loaded: mount everything marked inside it.
   ClipReveal.auto(container);
   
   // When the frame leaves the page:
   frame.destroy();   // observers gone, the frame left visible and bare

   Show all 17 lines

3. Fit it to your page

   • Structure: one box marked data-clip-reveal, holding the picture: an img, a video, a picture, a canvas, an iframe or an svg, the first one found. To name another element as the picture, a wrapper for instance, mark it data-clip-reveal-media. A box with no such child still opens; only the counter scale is missing.
   • The value of the attribute is the direction: data-clip-reveal="up", down, left, right or center. Left empty, the frame takes the direction setting, up by default.
   • The box is clipped whole. Everything inside the marked box is hidden until it opens, so a caption that has to stay readable goes next to the box, not inside it. In the preview each caption is a sibling of its frame.
   • The frame owes itself a size. The picture fills the frame, not the other way round: the preview's frame has an aspect-ratio, and its image is width: 100%; height: 100%; object-fit: cover.
   • Rounded corners: give the frame its border-radius as usual. While the frame opens, the script reads that radius and writes it inside the clip (inset(... round ...)), since a clip-path ignores border-radius. At rest the clip is gone and the stylesheet's overflow: hidden on the frame keeps the picture inside the corners.
   • One setting for every frame of the page, without opening the file: declare window.ClipRevealSettings = { duration: 1.4 } in a script placed before clip-reveal.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-clip-reveal-* attribute on the frame itself (data-clip-reveal-duration="1.4"), so one frame can still differ from the page-wide setting.
   • Frames that come in together open in a row. They are gathered, their pictures are waited for, and they start in the order of the page, each one stagger after the one before. A frame that comes into view a moment later falls in step behind the last one. Nothing to mark: a row is what the scroll brings in at once.
   • What the script writes: data-clip-reveal-state on the frame, ready while it waits closed, playing, done once open, static under reduced motion. While a frame waits it carries one inline opacity: 0; while it plays it carries the clip, a will-change, an inline position: relative if it was static, the scale on its picture, and one span.clip-reveal-rule. Once open, all of that is taken off: no inline style, no node.
   • Events, both bubbling, with detail: { element, direction }: clip-reveal:start when a frame starts to open, clip-reveal:done when it is open and at rest.
   • **From JavaScript, beyond mount, auto and destroy**: the handle carries element, settings, state(), play() which opens the frame now whether it is in view or not, show() which opens it at once with no motion, reset() which closes it again, and replay() which closes it and plays it again if it is in view. ClipReveal.replay(root) and ClipReveal.destroy(root) do the same for every mounted frame inside root, the document by default.
   • **destroy() leaves the frame as it was**: observers and listeners gone, the rule removed, every inline style of the script taken off, the state attribute removed. The frame is then simply visible.
   • Touch: the same. The effect is driven by the scroll and reads no pointer.
   • **prefers-reduced-motion**: every frame is visible from the start, no clip, no scale, no rule. The state reads static. Turning the preference on while the page is open puts every frame at rest at once.
   • Without JavaScript, the noscript line of the markup shows the frames. If the script is late, a frame waits unseen, keeping its room; if it never comes, the frame shows by itself after four seconds.
   • The words and the pictures of the markup are the preview's, and they ship as they are. Put the user's own in their place whenever they want.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • Mark the box, not the image. A clip on the image itself cannot hold the counter scale, and the rule has nowhere to live. The attribute goes on the element around the picture.
   • **A frame with a border-radius and overflow: visible loses its corners when it lands.** The radius lives in the clip while the frame opens, and in overflow: hidden afterwards. The stylesheet sets it in :where(), so a class of the page that sets overflow: visible wins, and the picture's square corners then pop out at the end.
   • **An ancestor with overflow: hidden and a transform does not break it**, but an ancestor that is itself display: none when the page loads does: a frame that has no box never comes into view. Mount it when it is shown, with ClipReveal.auto(container).
   • Lazy images are waited for. A frame does not open on a blank: it waits for its picture to load, and the frames of its row wait with it, for two and a half seconds at most. A picture that is slow to arrive therefore delays its row, by design.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a frame that already carries the effect returns the existing handle. A page-wide block goes in window.ClipRevealSettings, which auto() reads itself; to change one frame afterwards, destroy() it, change its attributes, mount it again.
   • **scrub on a frame already in view when the page loads** shows it as far open as the scroll position says, which is often fully open: a scrubbed frame belongs further down the page.
   • **A frame taller than the window, with a high offset**, opens late: the offset is measured from the top of the frame.
   • A video opens like a picture, but is not waited for: start it on clip-reveal:start if it should only play once seen.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.