Staggered Framer Animation Code Override

stagger.jsx

import type { ComponentType } from "react"
import { Children, cloneElement } from "react"

// Learn more: https://www.framer.com/docs/guides/overrides/

export function withStaggerChildren(Component): ComponentType {
    return (props: any) => {
        const { children } = props
        const clonedChildren = Children.map(children, (child, index) =>
            cloneElement(child, {
                ...child.props,
                initial: { opacity: 0, y: 60, skewX: -15 },
                whileInView: {
                    opacity: 1,
                    y: 0,
                    skewX: 0,
                    transition: {
                        delay: 0.1 * index,
                        ease: "easeInOut",
                        type: "spring",
                        duration: 0.8,
                        bounce: 0,
                        damping: 20,
                    },
                },
                // viewport: { once: true },
            })
        )
        return <Component {...props}>{clonedChildren}</Component>
    }
}

export function withStaggerPlain(Component): ComponentType {
    return (props: any) => {
        const { children } = props
        const clonedChildren = Children.map(children, (child, index) =>
            cloneElement(child, {
                ...child.props,
                initial: { opacity: 0, y: 60, skewX: 0 },
                whileInView: {
                    opacity: 1,
                    y: 0,
                    skewX: 0,
                    transition: {
                        delay: 0.1 * index,
                        ease: "easeInOut",
                        type: "spring",
                        duration: 0.5,
                        bounce: 0,
                        damping: 20,
                    },
                },
                // viewport: { once: true },
            })
        )
        return <Component {...props}>{clonedChildren}</Component>
    }
}