2. Animate: Spring

Another animation that starts automatically. This one has a Spring curve.

Code Component

export function CC02AnimateSpring() {
    return (
        <Frame
            // Visual & layout
            size={150}
            radius={30}
            backgroundColor="#fff"
            center
            // Animation
            animate={{ rotate: 180 }}
            transition={{
                type: "spring",
                damping: 10,
                mass: 0.75,
                stiffness: 100,
            }}
        />
    )
}

Framer Motion

export function FM02AnimateSpring() {
    return (
        <Center>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                }}
                animate={{ rotate: 180 }}
                transition={{
                    type: "spring",
                    damping: 10,
                    mass: 0.75,
                    stiffness: 100,
                }}
            />
        </Center>
    )
}

Override

export function Animate_Spring(): Override {
    return {
        animate: { rotate: 180 },
        transition: {
            type: "spring",
            damping: 10,
            mass: 0.75,
            stiffness: 100,
        },
    }
}