Rotate: Step-by-step tutorial

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