scroll-experience

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

undefined

用于实现滚动动画的工具与技术

适用场景：规划滚动驱动体验时

python

undefined

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

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';

gsap.registerPlugin(ScrollTrigger);

// Basic scroll animation
gsap.to('.element', {
  scrollTrigger: {
    trigger: '.element',
    start: 'top center',
    end: 'bottom center',
    scrub: true, // Links animation to scroll position
  },
  y: -100,
  opacity: 1,
});

javascript

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Basic scroll animation
gsap.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

Framer Motion 滚动实现

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>
  );
}

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原生实现（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%;
}

undefined

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%;
}

undefined

Parallax Storytelling

视差叙事

Tell stories through scroll depth

When to use: When creating narrative experiences

javascript

undefined

通过滚动深度讲述故事

适用场景：创建叙事类体验时

javascript

undefined

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

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 layers
gsap.to('.background', {
  scrollTrigger: {
    scrub: true
  },
  y: '-20%', // Moves slower
});

gsap.to('.foreground', {
  scrollTrigger: {
    scrub: true
  },
  y: '-50%', // Moves faster
});

javascript

// GSAP parallax layers
gsap.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)
    ↓ scroll
Section 2: Context (text + supporting visuals)
    ↓ scroll
Section 3: Journey (parallax storytelling)
    ↓ scroll
Section 4: Climax (dramatic reveal)
    ↓ scroll
Section 5: Resolution (CTA or conclusion)

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

Text Reveals

文本展示效果

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

undefined

滚动时淡入
触发时打字机效果
逐词高亮
粘性文本搭配动态视觉

undefined

Sticky Sections

粘性区域

Pin elements while scrolling through content

When to use: When content should stay visible during scroll

javascript

undefined

滚动内容时固定元素位置

适用场景：内容需在滚动过程中保持可见时

javascript

undefined

Sticky Sections

CSS Sticky

css

.sticky-container {
  height: 300vh; /* Space for scrolling */
}

.sticky-element {
  position: sticky;
  top: 0;
  height: 100vh;
}

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',
});

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,
  },
});

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

undefined

产品功能导览
前后对比展示
分步流程介绍
图片画廊

undefined

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.

弊端：用户厌恶失去滚动控制权，严重影响可访问性，破坏返回按钮使用预期，在移动端体验糟糕。

替代方案：增强滚动体验而非替换它，保持自然滚动速度，使用scrub动画，允许用户正常滚动。

❌ 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

问题	严重程度	解决方案
滚动时动画卡顿	高	## 修复滚动卡顿
视差效果在移动端失效	高	## 移动端安全视差
滚动体验缺乏可访问性	中	## 可访问的滚动体验
关键内容被动画遮挡	中	## 内容优先的滚动设计

scroll-experience

Original

Translation

Scroll Experience

滚动体验

Capabilities

核心能力

Patterns

实践模式

Scroll Animation Stack

滚动动画技术栈

Scroll Animation Stack

Scroll Animation Stack

Library Options

Library Options

GSAP ScrollTrigger Setup

GSAP ScrollTrigger Setup

Framer Motion Scroll

Framer Motion 滚动实现

CSS Native (2024+)

CSS原生实现（2024+）

Parallax Storytelling

视差叙事

Parallax Storytelling

Parallax Storytelling

Layer Speeds

Layer Speeds

Creating Depth

Creating Depth

Story Beats

故事节点

Text Reveals

文本展示效果

Sticky Sections

粘性区域

Sticky Sections

Sticky Sections

CSS Sticky

CSS Sticky

GSAP Pin

GSAP Pin

Horizontal Scroll Section

横向滚动区域

Use Cases

适用场景

Anti-Patterns

反模式

❌ Scroll Hijacking

❌ 滚动劫持

❌ Animation Overload

❌ 动画过载

❌ Desktop-Only Experience

❌ 仅适配桌面端的体验

⚠️ Sharp Edges

⚠️ 注意事项

Related Skills

相关技能