Chapter 140: Sliders & Carousels (Recipes)

Core Idea

Curated recipes from Motion's official examples gallery for sliders & carousels. 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

• ios slider (js, react): An example of recreating the iOS slider using Motion for JavaScript. This example creates a brightness slider with iOS-like
• carousel ios exposure slider (react): An example of creating a camera exposure slider interface with animated notches using the Motion+ Carousel component for React.
• image reveal slider (js, react): An image reveal slider that uses Motion's drag functionality to create a before/after image comparison with a sliding reveal
• apple intelligence (react): An example of the 'ripple' part of the Apple Intelligence animation using Motion for React. It uses a cloned version of the

Code Examples

"use client"

import { useRef } from "react"

export default function Slider({
    maxPull = 20,
    maxSquish = 0.92,
    maxStretch = 1.08,
    keyboardStep = 0.05,
    keyboardSpring = { stiffness: 200, damping: 60 },
}) {
    const ref = useRef(null)

    return (
        <div style={container}>
            <div ref={ref} style={slider}>
                <div style={indicator} />
                <div>
// ...

• What it demonstrates: ios slider pattern.

"use client"

import { motion, useMotionValue } from "motion/react"

export default function CameraExposureSlider() {
    const exposure = useMotionValue(0)

    return (
        <div className="container">
            <div className="image-container">
                <img src="your-image.jpg" alt="Sample photo" />
            </div>

            <ProgressIndicator value={exposure} />

            <div className="exposure-slider">{/* Carousel will go here */}</div>
        </div>
    )
// ...

• What it demonstrates: carousel ios exposure slider 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.