Animation » Example Animations » 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.

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 }}
            />
        )
    }
}

Leave a Reply