Transition options example: Step-by-step

In this tutorial, we'll build the Transition options example step-by-step.

This example is rated 1/5 difficulty, which means we'll spend some time explaining the Motion APIs that we've chosen to use (and why), and also any browser JavaScript APIs we encounter that might be unfamiliar to beginners.

Introduction

The Transition example shows how to adjust animations using Motion's transition options. With Motion, you can precisely control the timing, easing, and delay of your animations to create polished UI interactions.

Get started

Let's start with a basic circle component:

export default function TransitionOptions() {
    return (
        <div
            style={{
                width: 200,
                height: 200,
                borderRadius: "50%",
                background: "var(--accent)",
            }}
        />
    )
}

Let's animate!

Import from Motion

First, we'll import Motion:

import * as motion from "motion/react-client"

Creating the entrance animation

Let's start with a simple fade and scale animation:

<motion.div
    style={ball}
    initial={{ opacity: 0, scale: 0.5 }}
    animate={{ opacity: 1, scale: 1 }}
/>

This creates a basic animation where our circle:

• Starts invisible (opacity: 0) and at half size (scale: 0.5)
• Animates to fully visible (opacity: 1) and full size (scale: 1)

Adding duration

We can control how long the animation takes using the duration option:

<motion.div
    style={ball}
    initial={{ opacity: 0, scale: 0.5 }}
    animate={{ opacity: 1, scale: 1 }}
    transition={{ duration: 0.8 }}
/>

Now our animation takes exactly 0.8 seconds to complete.

Adding a delay

We can make the animation start after a short pause using the delay option:

<motion.div
    style={ball}
    initial={{ opacity: 0, scale: 0.5 }}
    animate={{ opacity: 1, scale: 1 }}
    transition={{
        duration: 0.8,
        delay: 0.5,
    }}
/>

The animation now waits 0.5 seconds before starting.

Custom easing

Finally, let's add a custom easing curve to make the animation more dynamic:

<motion.div
    style={ball}
    initial={{ opacity: 0, scale: 0.5 }}
    animate={{ opacity: 1, scale: 1 }}
    transition={{
        duration: 0.8,
        delay: 0.5,
        ease: [0, 0.71, 0.2, 1.01],
    }}
/>

The ease array [0, 0.71, 0.2, 1.01] creates a custom "bounce" effect:

• The animation starts fast
• Overshoots slightly
• Settles back to its final position

This creates a more playful and engaging entrance animation than a linear transition would.

Conclusion

In this tutorial, we learned how to:

• Create basic entrance animations with initial and animate
• Control animation duration for precise timing
• Add delays to stagger animation starts
• Create custom easing curves for more dynamic motion