27. Variants: Staggered

A first example of how child frames will follow the animation of the parent frame (or motion.div).

The delay between the parent and child animations is orchestrated with staggerChildren and delayChildren.

Code component

export function CC27VariantsStagger() {
    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 },
    }

    const background = "#80F"

    return (
        <Frame
            // Visual & layout
            size={150}
            radius={30}
            backgroundColor="#fff"
            center
            // Animation
            variants={container}
            initial="hidden"
            animate="show"
        >
            <Frame
                // Visual & layout
                size={40}
                radius={100}
                backgroundColor={background}
                left={30}
                // Animation
                variants={itemA}
            />
            <Frame
                // Visual & layout
                size={40}
                radius={100}
                backgroundColor={background}
                left={80}
                // Animation
                variants={itemA}
            />
            <Frame
                // Visual & layout
                size={40}
                radius={100}
                backgroundColor={background}
                left={30}
                // Animation
                variants={itemB}
            />
            <Frame
                // Visual & layout
                size={40}
                radius={100}
                backgroundColor={background}
                left={80}
                // Animation
                variants={itemB}
            />
        </Frame>
    )
}

Framer Motion

export function FM27VariantsStagger() {
    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 },
    }

    const background = "#80F"

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

Overrides

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

    return {
        variants: container,
        initial: "hidden",
        animate: "show",
    }
}

export function ChildA(): Override {
    return {
        variants: {
            hidden: { scale: 0, top: 100 },
            show: { scale: 1, top: 30 },
        },
    }
}

export function ChildB(): Override {
    return {
        variants: {
            hidden: { scale: 0, top: 200 },
            show: { scale: 1, top: 80 },
        },
    }
}