Framer X » Animation » Example animations » 4. Animate: Reverse

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.)

Open Framer Motion version in CodeSandbox

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 },
    }
}

Leave a Reply