avent-ui/dist/context/Page Transition/src/DennisSnellenberg.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 DennisSnellenberg = ({ children }) => {
    return (jsxs("div", { className: 'min-h-screen w-full', children: [children, jsx(SVGMask, {})] }));
};
const SVGMask = () => {
    const { innerHeight, innerWidth } = window;
    const initialPath = `M0 300 C0,300 ${innerWidth / 2},-300 ${innerWidth},300 
                       L${innerWidth},${innerHeight + 300} 
                       C${innerWidth},${innerHeight + 300} ${innerWidth / 2},${innerHeight + 600} 0,${innerHeight + 300}
                       Z
                       `;
    const finalPath = `M0 300 C0,300 ${innerWidth / 2},300 ${innerWidth},300 
                       L${innerWidth},${innerHeight} 
                       C${innerWidth},${innerHeight} ${innerWidth / 2},${innerHeight} 0,${innerHeight}
                       Z
                       `;
    const curve = {
        initial: {
            d: initialPath,
        },
        enter: {
            d: finalPath,
            transition: {
                duration: 1,
                ease: [0.76, 0, 0.24, 1]
            },
        },
        exit: {
            d: initialPath,
        }
    };
    const slide = {
        initial: {
            top: "-300px"
        },
        enter: {
            top: "-100vh",
            transition: {
                duration: 1,
                ease: [0.76, 0, 0.24, 1]
            },
            transitionEnd: {
                top: "100dvh",
            },
        },
        exit: {
            top: "-300px",
            transition: {
                duration: 1,
                ease: [0.76, 0, 0.24, 1]
            },
        }
    };
    return (jsx(motion.svg, { ...anim(slide), className: 'w-screen fixed  left-0 pointer-events-none', style: { height: "calc(100vh + 600px)" }, children: jsx(motion.path, { ...anim(curve) }) }));
};

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