Framer X » Animation » Example animations » 3. Animate: Loop

3. Animate: Loop

With a loop of Infinity, the animation will never end.

Code Component

export function CC03AnimateLoop() {
    return (
        <Frame
            // Visual & layout
            size={150}
            radius={30}
            background="#fff"
            center
            // Animation
            animate={{ rotate: 360 }}
            transition={{ ease: "linear", duration: 2, loop: Infinity }}
        />
    )
}

Framer Motion

export function FM03AnimateLoop() {
    return (
        <Center>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    background: "#fff",
                }}
                animate={{ rotate: 360 }}
                transition={{ ease: "linear", duration: 2, loop: Infinity }}
            />
        </Center>
    )
}

Override

export function Animate_Loop(): Override {
    return {
        animate: { rotate: 360 },
        transition: { ease: "linear", duration: 2, loop: Infinity },
    }
}

Leave a Reply