@avent-ui/page-transition/dist/Elementis.js

Page Transition with React Router Dom

import { __assign } from './_virtual/_tslib.js';
import React__default from 'react';
import { anim } from './types.js';
import { motion } from './node_modules/framer-motion/dist/es/render/components/motion/proxy.js';

var Elementis = function (_a) {
    var children = _a.children;
    var divCount = 30;
    var slide = {
        initial: {
            scaleY: 1,
        },
        enter: function (index) { return ({
            scaleY: 0,
            transition: {
                duration: 0.5,
                delay: (divCount - index) * 0.01,
                ease: [0.12, 0, 0.39, 0]
            },
            transitionEnd: {
                transformOrigin: 'bottom',
            }
        }); },
        exit: function (index) { return ({
            scaleY: 1,
            transition: {
                duration: 0.5,
                delay: (divCount - index) * 0.01,
                ease: [0.12, 0, 0.39, 0]
            },
        }); },
    };
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement("div", { className: 'h-screen w-full flex flex-col fixed top-0 left-0 pointer-events-none z-50' }, Array.from({ length: divCount }).map(function (_, index) {
            return (React__default.createElement("div", { className: 'h-full w-full' },
                React__default.createElement(motion.div, __assign({}, anim(slide, index), { key: index, className: 'bg-green-300 h-full w-screen', style: { transformOrigin: "top" } }))));
        })),
        children));
};

export { Elementis as default };
//# sourceMappingURL=Elementis.js.map