Rotate example: Step-by-step

In this tutorial, we'll build the Rotate 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 Rotate example shows how to create a simple rotation animation in React using Motion. This example demonstrates the basics of animating independent transform properties with Motion's declarative API.

Get started

Let's start with a basic square component:

export default function Rotate() {
    return (
        <div
            style={{
                width: 100,
                height: 100,
                backgroundColor: "#98c379",
                borderRadius: 5,
            }}
        />
    )
}

Let's animate!

Import from Motion

First, we'll import Motion:

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

Creating the rotation animation

First, let's change our square to a motion.div:

<motion.div style={box} />

This will allow us to animate the div's rotate property via the animate prop.

<motion.div
    style={box}
    animate={{ rotate: 360 }}
    transition={{ duration: 1 }}
/>

By default, rotate is animated using a spring easing function.

We can change this by passing a transition prop:

transition={{ duration: 1, ease: "linear" }}

This will animate the rotate property using a linear easing function, or Motion's other transition options.

Conclusion

In this tutorial, we learned how to:

• Create a basic rotation animation using Motion
• Use the animate prop to declare our target values
• Control animation timing with the transition prop
• Let Motion handle complex transform calculations automatically