@avent-ui/page-transition
Version:
Page Transition with React Router Dom
59 lines (56 loc) • 2.48 kB
JavaScript
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 DennisSnellenberg = function (_a) {
var children = _a.children;
return (React__default.createElement("div", { className: 'min-h-screen w-full' },
children,
React__default.createElement(SVGMask, null)));
};
var SVGMask = function () {
var innerHeight = window.innerHeight, innerWidth = window.innerWidth;
var initialPath = "M0 300 C0,300 ".concat(innerWidth / 2, ",-300 ").concat(innerWidth, ",300 \n L").concat(innerWidth, ",").concat(innerHeight + 300, " \n C").concat(innerWidth, ",").concat(innerHeight + 300, " ").concat(innerWidth / 2, ",").concat(innerHeight + 600, " 0,").concat(innerHeight + 300, "\n Z\n ");
var finalPath = "M0 300 C0,300 ".concat(innerWidth / 2, ",300 ").concat(innerWidth, ",300 \n L").concat(innerWidth, ",").concat(innerHeight, " \n C").concat(innerWidth, ",").concat(innerHeight, " ").concat(innerWidth / 2, ",").concat(innerHeight, " 0,").concat(innerHeight, "\n Z\n ");
var curve = {
initial: {
d: initialPath,
},
enter: {
d: finalPath,
transition: {
duration: 1,
ease: [0.76, 0, 0.24, 1]
},
},
exit: {
d: initialPath,
}
};
var 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 (React__default.createElement(motion.svg, __assign({}, anim(slide), { className: 'w-screen fixed left-0 pointer-events-none', style: { height: "calc(100vh + 600px)" } }),
React__default.createElement(motion.path, __assign({}, anim(curve)))));
};
export { DennisSnellenberg as default };
//# sourceMappingURL=DennisSnellenberg.js.map