Instead of tweaking stiffness
, damping
, and mass
(as in the former spring example), you can use a duration-based spring and just pick a duration
and a desired level of bounce
.
export function Example() {
return (
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff"
}}
animate={{ rotate: 360 }}
transition={{ type: "spring", duration: 5, bounce: 0.6 }}
/>
);
}