Scroll Experience

This is for building those scroll-driven websites where content comes alive as you move down the page. Think NY Times interactives or Apple product launches. It covers the main libraries (GSAP ScrollTrigger, Framer Motion, Locomotive Scroll), parallax layering techniques, sticky sections, and horizontal scroll panels. The anti-patterns section is especially useful, warning against scroll hijacking and desktop-only experiences that break on mobile. It's opinionated about keeping natural scroll behavior while adding enhancement rather than replacing it. Good reference when you need cinematic scroll effects but want to avoid the common mistakes that make these experiences annoying instead of delightful.

skills.sh installs: 669
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill scroll-experience --agent claude-code

Installs into .claude/skills of the current project.

Files

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

## 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
```javascript
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

SKILL.md on GitHub