Search

3. Duration-based spring

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.

⚡️ Some Examples – 03 – Duration-based spring
open in CodeSandbox
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 }}
        />
    );
}

Leave a Reply

plugins premium WordPress
Scroll to Top