Scroll Experience

davila7/claude-code-templates/cli-tool/components/skills/creative-design/scroll-experience

作者 davila78da17d671b6f无许可证32K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库今天更新

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.

仅含说明Design & Creative Software Development

AI 生成的概览

指导构建沉浸式滚动驱动网页体验：视差叙事、滚动动画、粘性区块与电影感叙事。

功能: 该技能为创建滚动驱动的网页体验提供指导与代码模式，包括滚动触发动画、视差叙事、粘性与固定区块、横向滚动区块以及进度指示器。它对比了 GSAP ScrollTrigger、Framer Motion、Locomotive Scroll、Lenis 和原生 CSS scroll-timeline 等动画方案，并给出电影感页面的叙事结构。它还列出滚动劫持、动画过载等反模式，以及滚动卡顿、移动端视差和无障碍问题的修复思路。
适用场景: 适用于规划或实现滚动动画、视差、滚动叙事、互动故事或电影感网页区块的场景。适合落地页、产品功能演示和以滚动推动叙事的编辑类互动页面。
运行要求: 不包含脚本，仅为说明与代码示例。落地这些模式需要一个网页前端项目，并根据所选方案使用 GSAP 与 ScrollTrigger、Framer Motion、Locomotive Scroll、Lenis 等库，或依赖原生 CSS scroll-timeline 支持。

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`

来源与署名

来源：davila7/claude-code-templates位于cli-tool/components/skills/creative-design/scroll-experience提交8da17d6

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 davila7/claude-code-templates 的技能

React Best Practices

davila7

面向 React 与 Next.js 的性能指南，包含 40 多条关于瀑布请求、打包体积、渲染与重渲染的规则。

Software Development32K今天更新

Web Performance Optimization

davila7

指导开发者测量并修复网页性能问题，如核心网页指标、打包体积、图片与缓存。

Software Development32K今天更新

Find Bugs

davila7

审查本地分支改动中的缺陷、安全漏洞与代码质量问题，仅报告发现而不修改代码。

Security32K今天更新

Browser Automation

davila7

指导使用 Playwright 和 Puppeteer 进行浏览器自动化，用于测试、抓取和智能体浏览器控制。

Software Development32K今天更新

Code Review

davila7

依据 Sentry 工程实践指导代码审查，涵盖安全、性能、测试与设计。

Software Development32K今天更新

Commit

davila7

按照 Sentry 的约定式提交规范格式化 Git 提交信息，包括问题引用。

Software Development32K今天更新

更多Design & Creative技能

Theme Factory

anthropics

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

Design & Creative179K今天更新

Frontend Design

anthropics

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative179K今天更新

Canvas Design

anthropics

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative179K今天更新

Frontend Design

anthropics

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新

## 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`