Watch each page, or scroll one: the fade-up, the card pile and the hiding header
Scroll Reveal vs. Stacking Cards vs. Hide-on-Scroll Header
/ animation-timeline: view() · position: sticky /
also called scroll animation, animate on scroll, scroll-triggered animation, auto-hiding header, sticky stacking cards, quick return (Android term)
“The animations which show up as you scroll” are usually one of three effects: a scroll reveal, stacking cards or a hide-on-scroll header. A scroll reveal fades each block in as it rises into place (CSS animation-timeline: view() or IntersectionObserver; Shopify's Dawn theme calls it “Reveal sections on scroll”). Stacking cards stick to the top and pile up (position: sticky), each one riding over the last, and a hide-on-scroll header slides away while you scroll down and returns on the first scroll up (its cousin shrinks to a slim bar instead). Parallax moves layers at different speeds, and a plain sticky header never hides.
If you called it…
…you meant Scroll Reveal vs. Stacking Cards vs. Hide-on-Scroll Header.
Anatomy — every part, named
- 1Entering block (scroll reveal)
animation-range: entry“Section that comes up from bottom” is the entering block: caught halfway through its reveal, still see-through and a few pixels below where it will rest.
- 2Covering card (stacking cards)
position: sticky; top“The cards stacking on top of previous one on scroll” is the covering card: the next card riding up over one that has stopped, whose top edge still shows as a step above it.
- 3Retracting header (hide-on-scroll header)
transform: translateY(-100%)“The header slide away when you scroll down” is the retracting header: the top bar half out of view on its way up, ready to slide back the moment you scroll up.
Prompt — paste into your agent
Build the scroll effect that fits: a scroll reveal (CSS animation-timeline: view(), or IntersectionObserver) that fades a block in as it rises about 24px; stacking cards, each position: sticky with a slightly larger top so the next covers the last; or a hide-on-scroll header that slides out (translateY(-100%)) on scroll down and back on any scroll up. Never leave content invisible if the script fails.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my scroll effect (an IntersectionObserver or animation-timeline: view() reveal, sticky stacking cards, a hide-on-scroll header). Rule out: blocks stuck invisible because they start at opacity: 0 and the observer never fires; a reveal that replays every time it re-enters because once was left off; animation-timeline declared before the animation shorthand, which resets it; sticky cards that never stick because an ancestor sets overflow, or that show no step because they all share one top; the covered card shrinking from its center instead of transform-origin: top; a header that flickers on tiny scroll jitters because the handler has no tolerance, or hides while its menu is open; the motion still playing under prefers-reduced-motion. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | animation-timeline: view() | the scroll reveal; Chrome, Edge, Safari 26, Firefox from 159 |
| CSS | position: sticky | stacking cards, each card's top a few pixels lower than the last |
| JavaScript | IntersectionObserver | the reveal trigger that works in every browser |
| Motion | whileInView | add viewport={{ once: true }} to play it once; import from "motion/react" |
| CSS | @container scroll-state(scrolled: block-start) | shows the header after a scroll up; Chrome 144+ only |
| Headroom.js | new Headroom(header).init() | adds headroom--unpinned while you scroll down |
See also
From the maker of this siteFowlNote · Notes that float over any app, one shortcut awayfowlnote.app →