Scroll Experience

by davila78da17d671b6fNo license32K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

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.

Instructions onlyDesign & Creative Software Development

AI-generated overview

Guides building immersive scroll-driven web experiences: parallax storytelling, scroll animations, sticky sections and cinematic narratives.

What it does: This skill provides guidance and code patterns for creating scroll-driven web experiences, including scroll-triggered animations, parallax storytelling, sticky and pinned sections, horizontal scroll sections, and progress indicators. It compares animation libraries such as GSAP ScrollTrigger, Framer Motion, Locomotive Scroll, Lenis and native CSS scroll-timeline, and offers narrative structures for cinematic pages. It also lists anti-patterns like scroll hijacking and animation overload, plus fixes for scroll jank, mobile parallax and accessibility.
When to use it: Use it when planning or implementing scroll animation, parallax, scroll storytelling, interactive narratives or cinematic website sections. It suits landing pages, product feature walkthroughs and editorial interactives where scrolling drives the narrative.
Requirements: No scripts are included; it is instructions and code examples only. Implementing the patterns requires a web frontend project and, depending on the chosen approach, libraries such as GSAP with ScrollTrigger, Framer Motion, Locomotive Scroll or Lenis, or native CSS scroll-timeline support.

Scroll Experience

Role: Scroll Experience Architect

You see scrolling as a narrative device, not just navigation. You create moments of delight as users scroll. You know when to use subtle animations and when to go cinematic. You balance performance with visual impact. You make websites feel like movies you control with your thumb.

Capabilities

Scroll-driven animations
Parallax storytelling
Interactive narratives
Cinematic web experiences
Scroll-triggered reveals
Progress indicators
Sticky sections
Scroll snapping

Patterns

Scroll Animation Stack

Tools and techniques for scroll animations

When to use: When planning scroll-driven experiences

python

## Scroll Animation Stack
### Library Options| Library | Best For | Learning Curve ||---------|----------|----------------|| GSAP ScrollTrigger | Complex animations | Medium || Framer Motion | React projects | Low || Locomotive Scroll | Smooth scroll + parallax | Medium || Lenis | Smooth scroll only | Low || CSS scroll-timeline | Simple, native | Low |
### GSAP ScrollTrigger Setup```javascriptimport { gsap } from 'gsap';import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// Basic scroll animationgsap.to('.element', {  scrollTrigger: {    trigger: '.element',    start: 'top center',    end: 'bottom center',    scrub: true, // Links animation to scroll position  },  y: -100,  opacity: 1,});

Framer Motion Scroll

jsx

import { motion, useScroll, useTransform } from 'framer-motion';
function ParallaxSection() {  const { scrollYProgress } = useScroll();  const y = useTransform(scrollYProgress, [0, 1], [0, -200]);
  return (    <motion.div style={{ y }}>      Content moves with scroll    </motion.div>  );}

CSS Native (2024+)

css

@keyframes reveal {  from { opacity: 0; transform: translateY(50px); }  to { opacity: 1; transform: translateY(0); }}
.animate-on-scroll {  animation: reveal linear;  animation-timeline: view();  animation-range: entry 0% cover 40%;}


### Parallax Storytelling
Tell stories through scroll depth
**When to use**: When creating narrative experiences
```javascript## Parallax Storytelling
### Layer Speeds| Layer | Speed | Effect ||-------|-------|--------|| Background | 0.2x | Far away, slow || Midground | 0.5x | Middle depth || Foreground | 1.0x | Normal scroll || Content | 1.0x | Readable || Floating elements | 1.2x | Pop forward |
### Creating Depth```javascript// GSAP parallax layersgsap.to('.background', {  scrollTrigger: {    scrub: true  },  y: '-20%', // Moves slower});
gsap.to('.foreground', {  scrollTrigger: {    scrub: true  },  y: '-50%', // Moves faster});

Story Beats

Section 1: Hook (full viewport, striking visual)    ↓ scrollSection 2: Context (text + supporting visuals)    ↓ scrollSection 3: Journey (parallax storytelling)    ↓ scrollSection 4: Climax (dramatic reveal)    ↓ scrollSection 5: Resolution (CTA or conclusion)

Text Reveals

Fade in on scroll
Typewriter effect on trigger
Word-by-word highlight
Sticky text with changing visuals


### Sticky Sections
Pin elements while scrolling through content
**When to use**: When content should stay visible during scroll
```javascript## Sticky Sections
### CSS Sticky```css.sticky-container {  height: 300vh; /* Space for scrolling */}
.sticky-element {  position: sticky;  top: 0;  height: 100vh;}

GSAP Pin

javascript

gsap.to('.content', {  scrollTrigger: {    trigger: '.section',    pin: true, // Pins the section    start: 'top top',    end: '+=1000', // Pin for 1000px of scroll    scrub: true,  },  // Animate while pinned  x: '-100vw',});

Horizontal Scroll Section

javascript

const sections = gsap.utils.toArray('.panel');
gsap.to(sections, {  xPercent: -100 * (sections.length - 1),  ease: 'none',  scrollTrigger: {    trigger: '.horizontal-container',    pin: true,    scrub: 1,    end: () => '+=' + document.querySelector('.horizontal-container').offsetWidth,  },});

Use Cases

Product feature walkthrough
Before/after comparisons
Step-by-step processes
Image galleries


## Anti-Patterns
### ❌ Scroll Hijacking
**Why bad**: Users hate losing scroll control.Accessibility nightmare.Breaks back button expectations.Frustrating on mobile.
**Instead**: Enhance scroll, don't replace it.Keep natural scroll speed.Use scrub animations.Allow users to scroll normally.
### ❌ Animation Overload
**Why bad**: Distracting, not delightful.Performance tanks.Content becomes secondary.User fatigue.
**Instead**: Less is more.Animate key moments.Static content is okay.Guide attention, don't overwhelm.
### ❌ Desktop-Only Experience
**Why bad**: Mobile is majority of traffic.Touch scroll is different.Performance issues on phones.Unusable experience.
**Instead**: Mobile-first scroll design.Simpler effects on mobile.Test on real devices.Graceful degradation.
## ⚠️ Sharp Edges
| Issue | Severity | Solution ||-------|----------|----------|| Animations stutter during scroll | high | ## Fixing Scroll Jank || Parallax breaks on mobile devices | high | ## Mobile-Safe Parallax || Scroll experience is inaccessible | medium | ## Accessible Scroll Experiences || Critical content hidden below animations | medium | ## Content-First Scroll Design |
## Related Skills
Works well with: `3d-web-experience`, `frontend`, `ui-design`, `landing-page-design`

Source and attribution

Source:davila7/claude-code-templatesincli-tool/components/skills/creative-design/scroll-experienceat commit8da17d6

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from davila7/claude-code-templates

React Best Practices

davila7

A React and Next.js performance guide with 40+ rules on waterfalls, bundles, rendering and re-renders.

Includes scripts

Software Development32Kupdated today

Web Performance Optimization

davila7

Guides developers through measuring and fixing web performance issues such as Core Web Vitals, bundle size, images and caching.

Software Development32Kupdated today

Find Bugs

davila7

Reviews local branch changes for bugs, security vulnerabilities, and code quality issues, reporting findings without making changes.

Security32Kupdated today

Browser Automation

davila7

Guides browser automation with Playwright and Puppeteer for testing, scraping, and agentic browser control.

Software Development32Kupdated today

Code Review

davila7

Guides code reviews of pull requests using Sentry engineering practices, covering security, performance, testing and design.

Software Development32Kupdated today

Commit

davila7

Formats Git commit messages using Sentry's conventional-commit conventions, including issue references.

Software Development32Kupdated today

More in Design & Creative

Theme Factory

anthropics

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts

Design & Creative179Kupdated today

Frontend Design

anthropics

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today

## Scroll Animation Stack
### Library Options| Library | Best For | Learning Curve ||---------|----------|----------------|| GSAP ScrollTrigger | Complex animations | Medium || Framer Motion | React projects | Low || Locomotive Scroll | Smooth scroll + parallax | Medium || Lenis | Smooth scroll only | Low || CSS scroll-timeline | Simple, native | Low |
### GSAP ScrollTrigger Setup```javascriptimport { gsap } from 'gsap';import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// Basic scroll animationgsap.to('.element', {  scrollTrigger: {    trigger: '.element',    start: 'top center',    end: 'bottom center',    scrub: true, // Links animation to scroll position  },  y: -100,  opacity: 1,});

import { motion, useScroll, useTransform } from 'framer-motion';
function ParallaxSection() {  const { scrollYProgress } = useScroll();  const y = useTransform(scrollYProgress, [0, 1], [0, -200]);
  return (    <motion.div style={{ y }}>      Content moves with scroll    </motion.div>  );}

@keyframes reveal {  from { opacity: 0; transform: translateY(50px); }  to { opacity: 1; transform: translateY(0); }}
.animate-on-scroll {  animation: reveal linear;  animation-timeline: view();  animation-range: entry 0% cover 40%;}


### Parallax Storytelling
Tell stories through scroll depth
**When to use**: When creating narrative experiences
```javascript## Parallax Storytelling
### Layer Speeds| Layer | Speed | Effect ||-------|-------|--------|| Background | 0.2x | Far away, slow || Midground | 0.5x | Middle depth || Foreground | 1.0x | Normal scroll || Content | 1.0x | Readable || Floating elements | 1.2x | Pop forward |
### Creating Depth```javascript// GSAP parallax layersgsap.to('.background', {  scrollTrigger: {    scrub: true  },  y: '-20%', // Moves slower});
gsap.to('.foreground', {  scrollTrigger: {    scrub: true  },  y: '-50%', // Moves faster});

Section 1: Hook (full viewport, striking visual)    ↓ scrollSection 2: Context (text + supporting visuals)    ↓ scrollSection 3: Journey (parallax storytelling)    ↓ scrollSection 4: Climax (dramatic reveal)    ↓ scrollSection 5: Resolution (CTA or conclusion)


### Sticky Sections
Pin elements while scrolling through content
**When to use**: When content should stay visible during scroll
```javascript## Sticky Sections
### CSS Sticky```css.sticky-container {  height: 300vh; /* Space for scrolling */}
.sticky-element {  position: sticky;  top: 0;  height: 100vh;}

gsap.to('.content', {  scrollTrigger: {    trigger: '.section',    pin: true, // Pins the section    start: 'top top',    end: '+=1000', // Pin for 1000px of scroll    scrub: true,  },  // Animate while pinned  x: '-100vw',});

const sections = gsap.utils.toArray('.panel');
gsap.to(sections, {  xPercent: -100 * (sections.length - 1),  ease: 'none',  scrollTrigger: {    trigger: '.horizontal-container',    pin: true,    scrub: 1,    end: () => '+=' + document.querySelector('.horizontal-container').offsetWidth,  },});


## Anti-Patterns
### ❌ Scroll Hijacking
**Why bad**: Users hate losing scroll control.Accessibility nightmare.Breaks back button expectations.Frustrating on mobile.
**Instead**: Enhance scroll, don't replace it.Keep natural scroll speed.Use scrub animations.Allow users to scroll normally.
### ❌ Animation Overload
**Why bad**: Distracting, not delightful.Performance tanks.Content becomes secondary.User fatigue.
**Instead**: Less is more.Animate key moments.Static content is okay.Guide attention, don't overwhelm.
### ❌ Desktop-Only Experience
**Why bad**: Mobile is majority of traffic.Touch scroll is different.Performance issues on phones.Unusable experience.
**Instead**: Mobile-first scroll design.Simpler effects on mobile.Test on real devices.Graceful degradation.
## ⚠️ Sharp Edges
| Issue | Severity | Solution ||-------|----------|----------|| Animations stutter during scroll | high | ## Fixing Scroll Jank || Parallax breaks on mobile devices | high | ## Mobile-Safe Parallax || Scroll experience is inaccessible | medium | ## Accessible Scroll Experiences || Critical content hidden below animations | medium | ## Content-First Scroll Design |
## Related Skills
Works well with: `3d-web-experience`, `frontend`, `ui-design`, `landing-page-design`

Scroll Experience Agent Skill | SourceWeft