1. Animate

A simple animation that uses the default tween curve.

Code component

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 the animation should have.

import * as React from "react"
import { Frame } from "framer"

export function CC01Animate() {
    return (
        <Frame
            // Visual & layout
            size={150}
            radius={30}
            backgroundColor="#fff"
            center
            // Animation
            animate={{ rotate: 360 }}
            transition={{ duration: 2 }}
        />
    )
}

Framer Motion

import * as React from "react"
import { motion } from "framer"
import { Center } from "./center"

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

Override

import { Override } from "framer"

export function Animate(): Override {
    return {
        animate: { rotate: 360 },
        transition: { duration: 2 },
    }
}