28. Variants: Staggered animation

As shown in the previous example, a child will automatically follow its parent’s animation (when using variants). You can orchestrate the delay between the parent and child animations with staggerChildren and delayChildren.

Code component

export default function CC_28_Variants_Staggered_animation(props) {
    const container = {
        hidden: { rotate: 90 },
        show: {
            rotate: 0,
            transition: {
                staggerChildren: 0.1,
                delayChildren: 0.3,
            },
        },
    }

    const itemA = {
        hidden: { scale: 0, top: 100 },
        show: { scale: 1, top: 30 },
    }

    const itemB = {
        hidden: { scale: 0, top: 200 },
        show: { scale: 1, top: 80 },
    }

    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    position: "relative",
                }}
                variants={container}
                initial="hidden"
                animate="show"
            >
                <motion.div
                    style={{ ...blobStyle, left: 30 }}
                    variants={itemA}
                />
                <motion.div
                    style={{ ...blobStyle, left: 80 }}
                    variants={itemA}
                />
                <motion.div
                    style={{ ...blobStyle, left: 30 }}
                    variants={itemB}
                />
                <motion.div
                    style={{ ...blobStyle, left: 80 }}
                    variants={itemB}
                />
            </motion.div>
        </div>
    )
}

const blobStyle: React.CSSProperties = {
    width: 40,
    height: 40,
    borderRadius: 75,
    backgroundColor: "#1d1ef0",
    position: "absolute",
}

Code overrides

export function Parent(Component): ComponentType {
    return (props) => {
        const container = {
            hidden: { rotate: 90 },
            show: {
                rotate: 0,
                transition: { staggerChildren: 0.1, delayChildren: 0.3 },
            },
        }

        return (
            <Component
                {...props}
                variants={container}
                initial="hidden"
                animate="show"
            />
        )
    }
}

export function ChildA(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                variants={{
                    hidden: { scale: 0, top: 100 },
                    show: { scale: 1, top: 30 },
                }}
            />
        )
    }
}

export function ChildB(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                variants={{
                    hidden: { scale: 0, top: 200 },
                    show: { scale: 1, top: 80 },
                }}
            />
        )
    }
}