Chapter 28: React scroll animation

Core Idea

Create scroll-triggered and scroll-linked effects — parallax, progress and more.

Key Concepts

• Types of scroll animation: There are two fundamental types of scroll animations:
• Performance: Motion is the only animation library that runs scroll-linked animations on the browser's n
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Scroll-triggered animations: Scroll-triggered animations fire when an element enters or leaves the viewport
• Animate once on scroll: By default
• Changing scroll container: By default
• Setting state: It's also possible to set React state when any element (not just a motion component) enter
• Scroll-linked animations: Scroll-linked animations connect CSS styles directly to scroll position.
• Scroll progress bar: Create a reading progress indicator by linking scrollYProgress to scaleX:

Code Examples

<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
/>

• What it demonstrates: Core usage pattern for React scroll animation.

Key Takeaways

1. Scroll-triggered: An animation is triggered when an element enters or leaves the viewp.
2. Scroll-linked: Animation values are linked directly to scroll position. Used for paral.
3. React scroll animation supports Types of scroll animation.

Connects To

• Scroll animations in JavaScript with scroll(): related Motion doc page.
• React motion component: related Motion doc page.
• useInView: related Motion doc page.
• useScroll: related Motion doc page.
• Motion AI Kit AI Context: docs and example context for your agent: related Motion doc page.