Chapter 134: Scroll-driven Effects (Recipes)

Core Idea

Curated recipes from Motion's official examples gallery for scroll-driven effects. Each entry is implemented in one or more of vanilla JS, React, and Vue; consult the framework-specific example on motion.dev for the full runnable version.

Key Concepts

• scroll fade (js): An example of fading content in and out as you scroll using Motion's scroll function.
• scroll hide header (react): A sticky header that hides when scrolling down and reappears when scrolling up. Uses useMotionValueEvent to detect scroll
• scroll highlight (js): An example of creating a scroll-triggered skill showcase with dynamic highlighting in Motion.
• scroll image reveal (react): Images reveal with a clip-path curtain effect as you scroll. Uses useScroll with element targeting and useTransform for clipPath
• scroll pinning (js): An example of pinning content on scroll and animating content horizontally using position: sticky and Motion's scroll function.
• scroll triggered (js): An example of using Motion's inView function to trigger animations when elements enter the viewport.
• scroll velocity linked offset (react): A 3D carousel with scroll velocity-linked wave effect using Motion for React.
• scroll zoom hero (react): An immersive hero section where the background image scales up, blurs, and fades as you scroll. Creates a dramatic entry effect.
• parallax (js, react): An example of creating a parallax effect using Motion's scroll function.
• shared view animation (js): Animate shared elements between states using View Transitions API via Motion's view() function.
• view animation (js): An example of animating a layout change using the View Transitions API via Motion's simple view function.

Code Examples

<section class="img-container">
    <div>
        <img src="your-image-1.jpg" />
        <h2>#001</h2>
    </div>
</section>
<section class="img-container">
    <div>
        <img src="your-image-2.jpg" />
        <h2>#002</h2>
    </div>
</section>
<section class="img-container">
    <div>
        <img src="your-image-3.jpg" />
        <h2>#003</h2>
    </div>
</section>
// ...

• What it demonstrates: scroll fade pattern.

"use client"

import { motion } from "motion/react"

export default function ScrollHideHeader() {
    return (
        <div id="example">
            <header className="header">
                <div className="header-content">
                    <div className="logo">Logo</div>
                    <nav>
                        <a href="#">Docs</a>
                        <a href="#">Examples</a>
                        <a href="#">Blog</a>
                    </nav>
                </div>
            </header>

// ...

• What it demonstrates: scroll hide header pattern.

Key Takeaways

1. These are recipe-level compositions of core Motion primitives (variants, gestures, layout, scroll, springs), not new APIs.
2. Most recipes exist in multiple frameworks with near-identical logic, only the component syntax differs.
3. Reach for the closest-matching recipe as a starting point, then adapt timing/easing/spring values to the design.

Connects To

• Transitions, Keyframes & Variants: recipes here compose those lower-level primitives.
• Gestures & Interaction: several recipes layer on drag/hover/press gestures.