Scroll Experience

1---
2name: scroll-experience
3description: "Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website."
4source: vibeship-spawner-skills (Apache 2.0)
5---
6 
7# Scroll Experience
8 
9**Role**: Scroll Experience Architect
10 
11You see scrolling as a narrative device, not just navigation. You create
12moments of delight as users scroll. You know when to use subtle animations
13and when to go cinematic. You balance performance with visual impact. You
14make websites feel like movies you control with your thumb.
15 
16## Capabilities
17 
18- Scroll-driven animations
19- Parallax storytelling
20- Interactive narratives
21- Cinematic web experiences
22- Scroll-triggered reveals
23- Progress indicators
24- Sticky sections
25- Scroll snapping
26 
27## Patterns
28 
29### Scroll Animation Stack
30 
31Tools and techniques for scroll animations
32 
33**When to use**: When planning scroll-driven experiences
34 
35```python
36## Scroll Animation Stack
37 
38### Library Options
39| Library | Best For | Learning Curve |
40|---------|----------|----------------|
41| GSAP ScrollTrigger | Complex animations | Medium |
42| Framer Motion | React projects | Low |
43| Locomotive Scroll | Smooth scroll + parallax | Medium |
44| Lenis | Smooth scroll only | Low |
45| CSS scroll-timeline | Simple, native | Low |
46 
47### GSAP ScrollTrigger Setup
48```javascript
49import { gsap } from 'gsap';
50import { ScrollTrigger } from 'gsap/ScrollTrigger';
51 
52gsap.registerPlugin(ScrollTrigger);
53 
54// Basic scroll animation
55gsap.to('.element', {
56  scrollTrigger: {
57    trigger: '.element',
58    start: 'top center',
59    end: 'bottom center',
60    scrub: true, // Links animation to scroll position
61  },
62  y: -100,
63  opacity: 1,
64});
65```
66 
67### Framer Motion Scroll
68```jsx
69import { motion, useScroll, useTransform } from 'framer-motion';
70 
71function ParallaxSection() {
72  const { scrollYProgress } = useScroll();
73  const y = useTransform(scrollYProgress, [0, 1], [0, -200]);
74 
75  return (
76    <motion.div style={{ y }}>
77      Content moves with scroll
78    </motion.div>
79  );
80}
81```
82 
83### CSS Native (2024+)
84```css
85@keyframes reveal {
86  from { opacity: 0; transform: translateY(50px); }
87  to { opacity: 1; transform: translateY(0); }
88}
89 
90.animate-on-scroll {
91  animation: reveal linear;
92  animation-timeline: view();
93  animation-range: entry 0% cover 40%;
94}
95```
96```
97 
98### Parallax Storytelling
99 
100Tell stories through scroll depth
101 
102**When to use**: When creating narrative experiences
103 
104```javascript
105## Parallax Storytelling
106 
107### Layer Speeds
108| Layer | Speed | Effect |
109|-------|-------|--------|
110| Background | 0.2x | Far away, slow |
111| Midground | 0.5x | Middle depth |
112| Foreground | 1.0x | Normal scroll |
113| Content | 1.0x | Readable |
114| Floating elements | 1.2x | Pop forward |
115 
116### Creating Depth
117```javascript
118// GSAP parallax layers
119gsap.to('.background', {
120  scrollTrigger: {
121    scrub: true
122  },
123  y: '-20%', // Moves slower
124});
125 
126gsap.to('.foreground', {
127  scrollTrigger: {
128    scrub: true
129  },
130  y: '-50%', // Moves faster
131});
132```
133 
134### Story Beats
135```
136Section 1: Hook (full viewport, striking visual)
137    ↓ scroll
138Section 2: Context (text + supporting visuals)
139    ↓ scroll
140Section 3: Journey (parallax storytelling)
141    ↓ scroll
142Section 4: Climax (dramatic reveal)
143    ↓ scroll
144Section 5: Resolution (CTA or conclusion)
145```
146 
147### Text Reveals
148- Fade in on scroll
149- Typewriter effect on trigger
150- Word-by-word highlight
151- Sticky text with changing visuals
152```
153 
154### Sticky Sections
155 
156Pin elements while scrolling through content
157 
158**When to use**: When content should stay visible during scroll
159 
160```javascript
161## Sticky Sections
162 
163### CSS Sticky
164```css
165.sticky-container {
166  height: 300vh; /* Space for scrolling */
167}
168 
169.sticky-element {
170  position: sticky;
171  top: 0;
172  height: 100vh;
173}
174```
175 
176### GSAP Pin
177```javascript
178gsap.to('.content', {
179  scrollTrigger: {
180    trigger: '.section',
181    pin: true, // Pins the section
182    start: 'top top',
183    end: '+=1000', // Pin for 1000px of scroll
184    scrub: true,
185  },
186  // Animate while pinned
187  x: '-100vw',
188});
189```
190 
191### Horizontal Scroll Section
192```javascript
193const sections = gsap.utils.toArray('.panel');
194 
195gsap.to(sections, {
196  xPercent: -100 * (sections.length - 1),
197  ease: 'none',
198  scrollTrigger: {
199    trigger: '.horizontal-container',
200    pin: true,
201    scrub: 1,
202    end: () => '+=' + document.querySelector('.horizontal-container').offsetWidth,
203  },
204});
205```
206 
207### Use Cases
208- Product feature walkthrough
209- Before/after comparisons
210- Step-by-step processes
211- Image galleries
212```
213 
214## Anti-Patterns
215 
216### ❌ Scroll Hijacking
217 
218**Why bad**: Users hate losing scroll control.
219Accessibility nightmare.
220Breaks back button expectations.
221Frustrating on mobile.
222 
223**Instead**: Enhance scroll, don't replace it.
224Keep natural scroll speed.
225Use scrub animations.
226Allow users to scroll normally.
227 
228### ❌ Animation Overload
229 
230**Why bad**: Distracting, not delightful.
231Performance tanks.
232Content becomes secondary.
233User fatigue.
234 
235**Instead**: Less is more.
236Animate key moments.
237Static content is okay.
238Guide attention, don't overwhelm.
239 
240### ❌ Desktop-Only Experience
241 
242**Why bad**: Mobile is majority of traffic.
243Touch scroll is different.
244Performance issues on phones.
245Unusable experience.
246 
247**Instead**: Mobile-first scroll design.
248Simpler effects on mobile.
249Test on real devices.
250Graceful degradation.
251 
252## ⚠️ Sharp Edges
253 
254| Issue | Severity | Solution |
255|-------|----------|----------|
256| Animations stutter during scroll | high | ## Fixing Scroll Jank |
257| Parallax breaks on mobile devices | high | ## Mobile-Safe Parallax |
258| Scroll experience is inaccessible | medium | ## Accessible Scroll Experiences |
259| Critical content hidden below animations | medium | ## Content-First Scroll Design |
260 
261## Related Skills
262 
263Works well with: `3d-web-experience`, `frontend`, `ui-design`, `landing-page-design`
264