Stack cards

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

   Three things belong to the page rather than to the component, and the pile needs all three: a card needs an opaque background, or the pile is see through; a card needs a height, or enough content to be tall; and the bottom padding of the track is how long the last card holds the screen before the page moves on.

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. Tune it

   Custom attributes
   Select the section 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-stack-cards	Marks the track, the block that holds the cards. It takes no value: leave the value field empty. Without it nothing is mounted, and the boot of the embed falls back to the section it was pasted in, which only works when the cards are that section’s own children.
   data-stack-cards-card	Marks one card. It takes no value. Every card carries it, and every card is a direct child of the track. Without it on any of them the engine takes the track’s own children as the cards, leaving out anything holding a script, and says so once in the console; a card that is a grandchild is never found either way. [ Optional ]
   data-stack-cards-state	Written by the engine on the track while the pile is in the window, with the value active, and removed when it leaves. Never written by hand: it is what the stylesheet reads to know it may scale and dim a card, so a pile nobody is looking at carries no transform and no filter. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same section. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-stack-cards-top	clamp(12px, 3vh, 40px)	Where a card stops, counted from the top of the window; the place for the height of a fixed header.
   data-stack-cards-step	clamp(4px, 0.6vw, 10px)	How much lower each card stops than the one before it, which is what gives the pile a visible edge.
   data-stack-cards-depth	0.08	How much a card shrinks while it is being covered, as a share of its size.
   data-stack-cards-dim	0.3	How much light a card loses while it is being covered.
   data-stack-cards-blur	0	How blurred a card is once it is covered, in pixels.
   data-stack-cards-enter	1	Where the receding starts, as a share of the window height measured from the top: 1 is the bottom edge.
   data-stack-cards-ease	none	The shape of the receding across that travel. Options: any GSAP ease name, none (even with the scroll), power1.out, power2.inOut, and so on.
   data-stack-cards-scrub	0	How long the cards take to catch up with the scroll, in seconds.
   data-stack-cards-debug	false	Writes the state, the card count and the pin line in data-stack-cards-debug-* attributes. Options: false, true.

Two files and their pictures (4), no build step. It also needs GSAP 3 and its ScrollTrigger plugin on the page, loaded with the two tags in step 1. Without them the cards still pin, which is CSS; only the receding is missing. 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 StackCards.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-stack-cards-top	clamp(12px, 3vh, 40px)	Where a card stops, counted from the top of the window; the place for the height of a fixed header.	The cards stop right at the top edge	The cards stop further down the screen
   data-stack-cards-step	clamp(4px, 0.6vw, 10px)	How much lower each card stops than the one before it, which is what gives the pile a visible edge.	The cards land exactly on top of one another	A deep deck, and less room for the card at the front
   data-stack-cards-depth	0.08	How much a card shrinks while it is being covered, as a share of its size.	The card stays its size and only darkens	The card falls right back, and its edges show around the one above
   data-stack-cards-dim	0.3	How much light a card loses while it is being covered.	The pile stays evenly lit	The cards underneath go to black
   data-stack-cards-blur	0	How blurred a card is once it is covered, in pixels.	Sharp all the way down, which costs nothing	A soft depth of field, paid for on every frame
   data-stack-cards-enter	1	Where the receding starts, as a share of the window height measured from the top: 1 is the bottom edge.	The card underneath waits, then recedes late and fast	The receding starts before the next card is on screen
   data-stack-cards-ease	none	The shape of the receding across that travel. Options: any GSAP ease name, none (even with the scroll), power1.out, power2.inOut, and so on.
   data-stack-cards-scrub	0	How long the cards take to catch up with the scroll, in seconds.	0 locks them to the scroll, frame for frame	They lag behind and glide to a stop
   data-stack-cards-debug	false	Writes the state, the card count and the pin line in data-stack-cards-debug-* attributes. Options: false, true.

2. Drive it from JavaScript

   When the cards change after load, when an attribute is changed at runtime, or when the page reacts to the card at the front.
   JavaScript Copy

   const element = document.querySelector('[data-stack-cards]');
   element.addEventListener('stackcards:card', (e) => {
     console.log(e.detail);
   });
   
   const pile = StackCards.mount(element);   // the track auto() mounted, or a new one
   pile.cards;       // the cards, in the order they stack
   pile.refresh();   // after changing an attribute, or after the cards changed
   
   // Cards added after the page loaded: mount everything marked inside it.
   StackCards.auto(document.body);
   
   // When the pile leaves the page:
   StackCards.destroy(element);   // kills the triggers and clears everything it wrote

3. Fit it to your page

   • Mark the track and the cards: data-stack-cards on the block, and data-stack-cards-card on each card inside it. The cards are the children of the track, in the order they should stack.
   • Settings go on the track, as more attributes: data-stack-cards-depth="0.16", data-stack-cards-top="96px". Three levels, least specific first: DEFAULTS, then window.StackCardsSettings = { depth: 0.16 } declared before the engine, then the track's own attributes.
   • A fixed header is what top is for: give it the height of the header and the cards stop under it, data-stack-cards-top="calc(72px + 1rem)".
   • From JavaScript: StackCards.mount(el, overrides) returns { element, settings, cards, refresh(), destroy() }. refresh() reads the attributes again, applies them and lays the triggers out afresh, which is what an attribute changed at runtime needs. StackCards.destroy(el), StackCards.refresh(el), StackCards.auto(root) and StackCards.defaults complete it.
   • Events, all bubbling: stackcards:ready once the pile is built ({ element, cards, reduced }), stackcards:enter and stackcards:leave as the pile comes into the window and leaves it ({ element, cards, top }), and stackcards:card each time another card takes the front ({ element, index, card, cards }).
   • **Under prefers-reduced-motion: reduce** nothing pins and nothing recedes: the cards follow one another down the page at full size and full light, and no scroll trigger is created at all. stackcards:ready still fires, with reduced: true.
   • Two piles on one page are two mounts with their own settings, their own triggers and their own events. Destroying one leaves the other running.
   • The preview ships whole. snippet.html, the pictures of images/ and the last part of stack-cards.css, after the line look, left out of the Webflow Embed, are the preview: the same cards, words, pictures and ground, in Geist and Geist Mono, loaded by the font tag of the Code tab. Nothing of the demo is left out. The sc-* classes are never read by the engine: on cards of your own, keep your classes, add the attributes, and drop that last part of the file and the font tag.
   • 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.
   • The words of the markup are the preview's, and they ship as they are: pasted, the page reads the way the preview did. Put the user's own content in their place whenever they want, in the page's language.

4. Avoid the pitfalls

   • An ancestor that cuts its overflow kills the pin. overflow: hidden on a parent makes it the scroll container of every sticky card inside it, and a container that does not scroll has nowhere to pin. Nothing errors, the cards simply scroll away. Use overflow-x: clip, which cuts the same overflow without creating a scroll container. The engine walks up the tree at mount and names the ancestor in the console.
   • A card needs an opaque background. The pile is cards laid over cards: a transparent card shows the one underneath through itself and the effect reads as a bug.
   • The track's own layout is yours. Flex column with a gap, or blocks with margins, both work. What must not happen is a display that takes the cards out of the flow (absolute, a grid where every card sits in the same cell): sticky needs a card to have a place in the flow and a parent taller than it.
   • The last card holds the screen for as long as the track has bottom padding, and not a pixel more. With none, it reaches its line and leaves in the same movement.
   • **Webflow loads its own GSAP, and Webflow.destroy() kills every ScrollTrigger on the page**, this engine's included. The pin does not care, being CSS, so the pile keeps working and only the receding would stop; the engine looks at itself 0.7 s, 2.2 s and 6 s after its build and puts its triggers back when they have been taken away. A page that calls Webflow.destroy() later than that gets the pin without the receding, and StackCards.refresh(el) brings it back.
   • The stylesheet is what pins. Without stack-cards.css nothing is sticky, nothing recedes, and the engine says so in the console: the sheet carries the mechanics, the engine only drives them.
   • The settings are custom properties, so a page-wide rule of yours on --stack-cards-depth and its siblings changes the pile as surely as an attribute does, and loses to an attribute the engine wrote.
   • **position: fixed inside a card** is relative to the card while the pile is on screen, and to the window when it is not: a transform makes a containing block, and the transform only exists while the pile is active. Put a fixed layer outside the track.

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.