avent-ui/dist/context/Page Transition/src/StackOverLap.js

The best UI library for Typescript and React

import { jsxs, jsx } from 'react/jsx-runtime';
import { motion } from 'framer-motion';
import { anim } from './types.js';

const StackOverLap = ({ children }) => {
    const slide = {
        initial: {
            top: '100dvh'
        },
        enter: {
            top: '100dvh',
        },
        exit: {
            top: '0',
            transition: {
                duration: 1,
                ease: [0.76, 0, 0.24, 1]
            }
        }
    };
    const 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 (jsxs("div", { className: 'bg-black', children: [jsx(motion.div, { ...anim(slide), className: 'h-screen w-screen bg-white fixed top-0 left-0 z-20' }), jsx(motion.div, { ...anim(prespective), className: '', children: jsx(motion.div
                // {...anim(opacity)} 
                , { 
                    // {...anim(opacity)} 
                    className: 'bg-white h-screen w-screen', children: children }) })] }));
};

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