avent-ui
Version:
The best UI library for Typescript and React
12 lines (9 loc) • 1.24 kB
JavaScript
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { motion } from 'framer-motion';
const StaggerBlockTransition = ({ children }) => {
const staggerDivCount = 10;
const ease = [0.22, 1, 0.36, 1];
return (jsxs(Fragment, { children: [jsx("div", { className: 'flex', children: Array.from({ length: staggerDivCount }).map((_, index) => (jsx(motion.div, { className: `w-[25dvw] h-screen bg-black fixed top-0 left-[${(100 / staggerDivCount * index)}dvw] z-50 flex-1`, style: { transformOrigin: 'top' }, initial: { scaleY: 0 }, animate: { scaleY: 0 }, exit: { scaleY: 1 }, transition: { duration: 1, ease: ease, delay: ((staggerDivCount - index) * 0.05) } }, index))) }), children, jsx("div", { className: 'flex', children: Array.from({ length: staggerDivCount }).map((_, index) => (jsx(motion.div, { className: `w-[25dvw] h-screen bg-black fixed top-0 left-[${(100 / staggerDivCount * index)}dvw] z-50 flex-1`, style: { transformOrigin: 'bottom' }, initial: { scaleY: 1 }, animate: { scaleY: 0 }, exit: { scaleY: 0 }, transition: { duration: 1, ease: ease, delay: ((staggerDivCount - index) * 0.05) } }, index))) })] }));
};
export { StaggerBlockTransition as default };
//# sourceMappingURL=StaggerBlockTransition.js.map