Chapter 139: Transitions, Keyframes & Variants (Recipes)

Core Idea

Curated recipes from Motion's official examples gallery for transitions, keyframes & variants. 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

• enter animation (react): An example of animating an element when it's added to the DOM using Motion for React.
• exit animation (react): An example of animating an element when it's removed from the DOM using AnimatePresence in Motion for React.
• keyframes (react): An example of animating an element using keyframes with Motion for React.
• keyframes wildcards (react): An example of using Motion for React's keyframe wildcards to create interruptible keyframe animations.
• variants (react): An example of orchestrating animation sequences using Motion for React's variants.
• transition (react): An example of setting transition options in Motion for React.
• animate presence modes (react): An example of the three AnimatePresence modes (sync, wait, and popLayout) demonstrating how elements enter and exit the DOM with
• layout animation (react): An example of animating a layout change using Motion for React's simple layout prop.
• motion path (react): An example of animating an element along a path using Motion for React.
• path drawing (react): An example of animating a SVG path to make a path drawing effect, using Motion for React.
• path morphing (react): An example of creating smooth SVG path morphing animations with Motion for React.
• svg path morphing (js): An example of using Motion and Flubber to animate an SVG between different shapes.
• use animation frame (react): An example of using Motion for React's useAnimationFrame hook to animate a 3D cube.
• css spring (react): An example of generating a spring animation in CSS using Motion's spring function.
• options (js): An example of using easing and duration options to customise a scale animation in Motion.
• stagger (js): An example of staggering animations in Motion using its stagger() function.
• spring (js): An example of a spring animation in Motion.
• bounce easing (js): A toggle switch that demonstrates custom easing functions with both bounce and spring animations.

Code Examples

export default function EnterAnimation() {
    return <div style={ball} />
}

/**
 * ==============   Styles   ================
 */

const ball = {
    width: 100,
    height: 100,
    backgroundColor: "#5686F5",
    borderRadius: "50%",
}

• What it demonstrates: enter animation pattern.

"use client"

import { useState } from "react"

export default function ExitAnimation() {
    const [isVisible, setIsVisible] = useState(true)

    return (
        <div style={container}>
            {isVisible ? <div style={box} /> : null}
            <button style={button} onClick={() => setIsVisible(!isVisible)}>
                {isVisible ? "Hide" : "Show"}
            </button>
        </div>
    )
}

/**
// ...

• What it demonstrates: exit animation 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.