1. Tween

A simple animation that uses the default tween curve.

Just passing an object with visual properties to animate will trigger an animation.

And with the transition property, you define how things should animate. Like, for example, which duration it should have.

import { motion } from "framer-motion";

export function Example() {
    return (
        <motion.div
            style={{
                width: 150,
                height: 150,
                borderRadius: 30,
                backgroundColor: "#fff"
            }}
            animate={{ rotate: 360 }}
            transition={{ duration: 2 }}
        />
    );
}