Enter animation example: Step-by-step

In this tutorial, we'll build the Enter animation 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 Enter animation example shows how to animate an element when it first appears on the page. It uses the initial and animate props from Motion for React to create a smooth entrance effect.

CSS animations can only handle when elements appear, and even then only with the modern @starting-style rule.

Get started

Let's start by creating a simple ball component without any animations:

export default function EnterAnimation() {
    return <div style={ball} />
}
 
/**
 * ==============   Styles   ================
 */
 
const ball = {
    width: 100,
    height: 100,
    backgroundColor: "#5686F5",
    borderRadius: "50%",
}

This creates a blue circle on the page, but it just appears instantly without any animation.

Let's animate!

Import from Motion

To animate our ball, we first need to import the motion component from Motion for React:

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

Basic functionality

Now we can replace the standard div with a motion.div:

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

To create an enter animation, we need to define:

1. An initial state for the element before animation starts
2. The final state we want it to animate to

We do this using the initial and animate props:

export default function EnterAnimation() {
    return (
        <motion.div
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1 }}
            style={ball}
        />
    )
}

Customizing the animation

We can further customize how the animation behaves using the transition prop:

export default function EnterAnimation() {
    return (
        <motion.div
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{
                duration: 0.4,
                scale: { type: "spring", visualDuration: 0.4, bounce: 0.5 },
            }}
            style={ball}
        />
    )
}

This creates a pleasant bouncy effect as the ball appears, making it feel more lively and natural than a typical CSS easing curve.

Conclusion

In this tutorial, we learned how to:

• Create enter animations using the initial and animate props
• Define different animation states using JavaScript objects
• Customize animations with the transition prop
• Use spring animations for more natural movement

Motion for React makes creating entrance animations straightforward, allowing you to add polish to your UI with minimal code.