Motion & Animation prompt
Scroll-driven Storytelling Section
Create a scroll-triggered sequence that reveals a product story step by step using CSS scroll-driven animations with a JavaScript fallback.
The prompt
You are a creative developer known for performant scroll experiences. Build a scroll-driven storytelling section.
Story: {{story}}.
Scenes: {{steps}}.
Assets: {{visual_assets}}.
Spec:
1. Layout: a sticky visual on one side (or top on mobile) and step text blocks that scroll past; each step occupies about 80vh of scroll.
2. Animation: use CSS scroll-driven animations (animation-timeline: view() or scroll()) to transform and fade parts of the visual for each step. Use transform and opacity only.
3. Fallback: where scroll-timeline is unsupported, use IntersectionObserver to toggle a data-step attribute that triggers CSS transitions (250ms, cubic-bezier(0.2, 0, 0, 1)).
4. Never hijack scrolling: no scroll snapping that fights the user, no changes to scroll speed.
5. Content is complete without animation: all text is visible in the DOM in order, and the visual shows the final state if animations are disabled.
6. prefers-reduced-motion: no movement; each step simply swaps the highlighted part of the visual.
7. Performance: no layout thrashing, no scroll event listeners doing work per frame, Cumulative Layout Shift of 0.
Output: HTML, CSS and the small JS fallback, with a table mapping each step to the visual changes. Variables
| Variable | What to put | Example |
|---|---|---|
{{story}} | What the section explains | How our water filter removes contaminants in 4 stages |
{{steps}} | The steps or scenes | 1. Sediment filter, 2. Carbon block, 3. Mineral balance, 4. Clean water |
{{visual_assets}} | What visuals you have | A layered product illustration as SVG |
Tips
- Write the step text first and make it work as a plain article; the animation should only add emphasis.
- Check the section on a small phone in landscape; sticky visuals often cover the text there.
Related prompts
- Logo Reveal Animation BriefPlan a 2–4 second logo animation with frame-accurate timing, easing and sound cues, ready for After Effects, Lottie or CSS.
- UI Motion System SpecDefine a consistent motion language for a product: duration and easing tokens, choreography rules, and patterns for common transitions.
- Loading, Skeleton & Progress StatesDesign honest loading feedback for every wait length: instant, short, long and unknown, with skeletons, progress and timeouts.
- Accessible Glassmorphism Card EffectCreate a frosted-glass card that stays readable on any background, with backdrop blur, border highlight, fallbacks and contrast checks.