@avent-ui/page-transition/dist/StackOverLap.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 StackOverLap = function (_a) {
    var children = _a.children;
    var slide = {
        initial: {
            top: '100dvh'
        },
        enter: {
            top: '100dvh',
        },
        exit: {
            top: '0',
            transition: {
                duration: 1,
                ease: [0.76, 0, 0.24, 1]
            }
        }
    };
    var prespective = {
        initial: {
            y: 0,
            scale: 1,
            opacity: 1,
        },
        enter: {
            y: 0,
            scale: 1,
            opacity: 1,
        },
        exit: {
            y: -100,
            scale: 0.9,
            opacity: 0.5,
            transition: {
                duration: 1.2,
                ease: [0.76, 0, 0.24, 1]
            }
        }
    };
    return (React__default.createElement("div", { className: 'bg-black' },
        React__default.createElement(motion.div, __assign({}, anim(slide), { className: 'h-screen w-screen bg-white fixed top-0 left-0 z-20' })),
        React__default.createElement(motion.div, __assign({}, anim(prespective), { className: '' }),
            React__default.createElement(motion.div
            // {...anim(opacity)} 
            , { 
                // {...anim(opacity)} 
                className: 'bg-white h-screen w-screen' }, children))));
};

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