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,
},
}
}