Some Examples » 28. Variants: Staggered animation

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

Join the Mighty Guides mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.



Leave a Reply