# scroll-experience

Guides the setup of scroll animations, parallax depth, and product reveals. Useful when designing interactive story layouts linked directly to viewport movement.

- skill · `type=skill` · Claude Code · 2127 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/scroll-experience
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/scroll-experience

## What it does

This skill guides developers through creating scroll-driven web interfaces where movement dictates the narrative flow. It provides architectural patterns for multiple technologies, including GSAP ScrollTrigger, Framer Motion for React applications, and modern CSS using `animation-timeline`. For smooth scrolling setups, it suggests Lenis or Locomotive Scroll.

Implementation guides cover layered depth with distinct speeds, horizontal sections, and pinned containers. It lays out narrative pacing across five beats, from the initial hook to the final call to action.

Scroll hijacking ruins touch interactions and accessibility. Overriding default browser scrolling is flagged as a major mistake.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill creative-design/scroll-experience
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill scroll-experience -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/scroll-experience/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/scroll-experience/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/scroll-experience/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/scroll-experience/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates scroll-experience
```

2. **Manually: put the files in place**
- File: `.github/skills/scroll-experience/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/scroll-experience
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/scroll-experience/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/scroll-experience

## When to use it
- set up multi-layered parallax with custom layer speeds
- pin sections during page movement using GSAP Pin
- build a horizontal scrolling container for product tours
- link native CSS keyframes to the viewport via `animation-timeline`

## Example prompts
- Set up a GSAP ScrollTrigger parallax section with slower background movement and faster foreground depth
- Implement a pinned horizontal gallery that scrolls sideways as the user moves down
- Create scroll-linked opacity and movement transitions using Framer Motion

## Similar
- [framer-motion-scroll](https://affpapa.org/en/nevibecode/skills/framer-motion-scroll.md) — skill · 803 installs
- [locomotive-scroll](https://affpapa.org/en/nevibecode/skills/locomotive-scroll.md) — skill · 2500 installs
- [scroll-scrubbed-word-reveal](https://affpapa.org/en/nevibecode/skills/scroll-scrubbed-word-reveal.md) — skill · 1400 installs
- [gsap-framer-scroll-animation](https://affpapa.org/en/nevibecode/skills/gsap-framer-scroll-animation.md) — skill · 3900 installs
- [animation-on-scroll](https://affpapa.org/en/nevibecode/skills/animation-on-scroll.md) — skill · 2000 installs
- [scroll-animations](https://affpapa.org/en/nevibecode/skills/scroll-animations.md) — skill · 1100 installs

## Other versions with the same name
- [scroll-experience · sickn33](https://affpapa.org/en/nevibecode/skills/sickn33-scroll-experience.md) — 2000 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md