4. Animate: Reverse
Use yoyo
to reverse an animation.
(There’s also flip
, which only swaps the to and from values and not the animation curve.)
Code component
export function CC04AnimateReverse() {
return (
<Frame
// Visual & layout
size={150}
radius={30}
backgroundColor="#fff"
center
// Animation
animate={{ rotate: 360 }}
transition={{ duration: 2, yoyo: Infinity }}
/>
)
}
Framer Motion
export function FM04AnimateReverse() {
return (
<Center>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
}}
animate={{ rotate: 360 }}
transition={{ duration: 2, yoyo: Infinity }}
/>
</Center>
)
}
Override
export function Animate_Reverse(): Override {
return {
animate: { rotate: 360 },
transition: { duration: 2, yoyo: Infinity },
}
}