Scroll Experience

Patterns

Scroll Animation Stack

Tools and techniques for scroll animations

When to use: When planning scroll-driven experiences

Scroll Animation Stack

Library Options

GSAP ScrollTrigger Setup

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

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+)

@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

Parallax Storytelling

Layer Speeds

Creating Depth

// 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)

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

Sticky Sections

CSS Sticky

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

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

GSAP Pin

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

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

Performance Optimization

Keep scroll experiences smooth

When to use: Always - scroll jank kills experiences

Performance Optimization

The 60fps Rule

• Animations must hit 60fps
• Only animate transform and opacity
• Use will-change sparingly
• Test on real mobile devices

GPU-Friendly Properties

Lazy Loading

// Only animate when in viewport
ScrollTrigger.create({
  trigger: '.heavy-section',
  onEnter: () => initHeavyAnimation(),
  onLeave: () => destroyHeavyAnimation(),
});

Mobile Considerations

• Reduce parallax intensity
• Fewer animated layers
• Consider disabling on low-end
• Test on throttled CPU

Debug Tools

// GSAP markers for debugging
scrollTrigger: {
  markers: true, // Shows trigger points
}

Sharp Edges

Animations stutter during scroll

Severity: HIGH

Situation: Scroll animations aren't smooth 60fps

Symptoms:

• Choppy animations
• Laggy scroll
• CPU spikes during scroll
• Mobile especially bad

Why this breaks: Animating wrong properties. Too many elements animating. Heavy JavaScript on scroll. No GPU acceleration.

Recommended fix:

Fixing Scroll Jank

Only Animate These

/* GPU-accelerated, smooth */