@avent-ui/page-transition
Version:
Page Transition with React Router Dom
16 lines (13 loc) • 1.5 kB
JavaScript
import React__default from 'react';
import { motion } from './node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
var StaggerBlockTransition = function (_a) {
var children = _a.children;
var staggerDivCount = 10;
var ease = [0.22, 1, 0.36, 1];
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement("div", { className: 'flex' }, Array.from({ length: staggerDivCount }).map(function (_, index) { return (React__default.createElement(motion.div, { key: index, className: "w-[25dvw] h-screen bg-black fixed top-0 left-[".concat((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) } })); })),
children,
React__default.createElement("div", { className: 'flex' }, Array.from({ length: staggerDivCount }).map(function (_, index) { return (React__default.createElement(motion.div, { key: index, className: "w-[25dvw] h-screen bg-black fixed top-0 left-[".concat((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) } })); }))));
};
export { StaggerBlockTransition as default };
//# sourceMappingURL=StaggerBlockTransition.js.map