Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
Stacking cards
As you scroll, each card stops at the top and the next climbs over it: the one below shrinks, tilts and darkens, and each drawing traces itself.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.
The code for this animation is part of lifetime access.
The preview stays open: watch it, slow it down, try it on your phone.
Lifetime accessWhat it does
Four coloured cards tell a process. As you scroll, the first stops at the top; the second climbs and settles on it, one step lower, while the first gets slightly smaller, tilts by a degree and darkens, like a sheet ending up under the pile. Each card has a line drawing that traces itself when the card reaches its place. At the end the pile stays still for a moment, complete.
How it works
Sticky, one step lower
The cards are position: sticky with top = offset + index × step (16 pixels): each stops just below the previous one and leaves its edge visible.
The anchors
Before every card there is a zero-height span. Triggers attach to it and not to the card, because a sticky card changes position while it is stuck and ScrollTrigger’s maths would go wrong.
Under the pile
With scrub, while the next card rises from the bottom to its step, the one below goes to scale 0.93, rotates ±1.4 degrees (one direction per card) and a dark veil rises over it up to 0.38.
The drawing that traces itself
Every SVG stroke takes its length with getTotalLength and starts with stroke-dashoffset equal to that length; when the card arrives the offset goes to zero and the stroke draws. Small pieces pop out with back.out.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
--alto / --scalino | style.css | 12vh / 16px | Where the first card stops and how much each one sticks out from the previous. |
PICCOLA | script.js | 0.93 | The scale of the covered card. |
STORTA | script.js | 1.4 | The degrees of rotation of the covered card. |
BUIO | script.js | 0.38 | How much the covered card darkens. |
When to use it
For a three-to-six step process, a method, the phases of a job: the pile makes each step feel like it rests on the previous one. With more than six cards the run gets long.
On phones
The cards stack text over drawing, with the same minimum height for all, and the step shrinks to 10 pixels.
With reduced motion
The cards stay sticky but do not shrink or tilt; the drawings are already traced.
Pitfalls
- Do not use the sticky card as a trigger: while stuck it changes position and start/end go wrong. Put a zero-height anchor before each card.
- An overflow hidden on a parent of the pile breaks sticky: if you need to clip something sideways use overflow: clip.
- All cards should have the same height, otherwise a short card shows the one below in full.
- Leave an empty space after the last card: without it the pile leaves as soon as it is complete and nobody sees it whole.
Libraries
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.
Weight: 10 KB of our own files.
Testing
Tested on 27 September 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
