3. Duration-based spring
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.
Code component
export default function CC_03_Duration_based_spring(props) {
return (
<div>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
}}
animate={{ rotate: 360 }}
transition={{ type: "spring", duration: 5, bounce: 0.6 }}
/>
</div>
)
}Code override
export function Duration_based_spring(Component): ComponentType {
return (props) => {
return (
<Component
{...props}
animate={{ rotate: 360 }}
transition={{ type: "spring", duration: 5, bounce: 0.6 }}
/>
)
}
}