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

The best UI library for Typescript and React

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

const Elementis = ({ children }) => {
    const divCount = 30;
    const slide = {
        initial: {
            scaleY: 1,
        },
        enter: (index) => ({
            scaleY: 0,
            transition: {
                duration: 0.5,
                delay: (divCount - index) * 0.01,
                ease: [0.12, 0, 0.39, 0]
            },
            transitionEnd: {
                transformOrigin: 'bottom',
            }
        }),
        exit: (index) => ({
            scaleY: 1,
            transition: {
                duration: 0.5,
                delay: (divCount - index) * 0.01,
                ease: [0.12, 0, 0.39, 0]
            },
        }),
    };
    return (jsxs(Fragment, { children: [jsx("div", { className: 'h-screen w-full flex flex-col fixed top-0 left-0 pointer-events-none z-50', children: Array.from({ length: divCount }).map((_, index) => {
                    return (jsx("div", { className: 'h-full w-full', children: createElement(motion.div, { ...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