{"ast":null,"code":"import { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-dev-runtime\";\nvar _jsxFileName = \"/home/gkkdzdg/www/src/layouts/Transition.js\";\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport gsap from 'gsap';\nimport { TransitionGroup, Transition as ReactTransition } from 'react-transition-group';\nimport cn from 'classnames';\nimport styles from './Transition.module.scss';\nimport { useMouseEvents, useWindowScroll } from 'beautiful-react-hooks';\nlet mouseY = 0;\nlet scrollY = 0;\n\nconst Transition = ({\n  children,\n  location\n}) => {\n  const transitionDuration = 1.8;\n  useMouseEvents().onMouseUp(event => {\n    mouseY = event.clientY;\n  });\n  useWindowScroll(_ => {\n    scrollY = window.scrollY;\n  });\n  const onExit = useCallback(node => {\n    const mainElement = node; //.querySelector('main')\n\n    mainElement.style.position = 'fixed';\n    mainElement.style.top = 0;\n    mainElement.style.transform = `translateY(${-scrollY}px)`;\n    const svgClip = document.querySelector('#clip');\n    const children = svgClip.children;\n    const docWidth = screen ? screen.width : window.innerWidth;\n    const docHeight = screen ? screen.height : window.innerHeight;\n    const length = children.length;\n    const strips = length / 2;\n    const duration = transitionDuration / 2;\n    const ease = 'power3.inOut';\n    const originY = mouseY > 60 ? mouseY : docHeight / 2;\n\n    for (let i = 0; i < length; i += 2) {\n      let topRect = children[i];\n      let bottomRect = children[i + 1];\n      const j = i / 2;\n      const xWidth = {\n        x: j * docWidth / strips,\n        width: docWidth / strips + 1\n      };\n      const tl = gsap.timeline();\n      tl.fromTo(topRect, _objectSpread(_objectSpread({}, xWidth), {}, {\n        y: scrollY,\n        height: originY\n      }), {\n        duration,\n        //ease: (j % 2) ? 'power3.in' : 'power3.out',\n        ease,\n        height: 0\n      }, j % 2 ? 0 : duration);\n      tl.fromTo(bottomRect, _objectSpread(_objectSpread({}, xWidth), {}, {\n        y: scrollY + originY,\n        height: docHeight - originY\n      }), {\n        duration,\n        //ease: (j % 2) ? 'power3.out' : 'power3.in',\n        ease,\n        y: scrollY + docHeight,\n        height: 0\n      }, j % 2 ? duration : 0);\n    }\n\n    mainElement.style.clipPath = 'url(#clip)';\n    gsap.to(mainElement, {\n      duration: transitionDuration,\n      onComplete: () => {\n        mainElement.style.clipPath = null;\n        node.ended();\n      }\n    });\n  }, []);\n  const onEntering = useCallback((node, isAppearing) => {\n    const mainElement = node; //.querySelector('main')\n\n    mainElement.style.zIndex = -1000;\n    gsap.to(node, {\n      duration: transitionDuration,\n      onComplete: () => {\n        mainElement.style.zIndex = '';\n        node.ended();\n      }\n    });\n  }, []);\n  const onEndListener = useCallback((node, done) => {\n    node.ended = () => {\n      done();\n    };\n  }, []);\n  return /*#__PURE__*/_jsxDEV(_Fragment, {\n    children: [/*#__PURE__*/_jsxDEV(\"svg\", {\n      width: \"0\",\n      height: \"0\",\n      className: cn(styles.svg),\n      children: /*#__PURE__*/_jsxDEV(\"defs\", {\n        children: /*#__PURE__*/_jsxDEV(\"clipPath\", {\n          id: \"clip\",\n          children: [/*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 110,\n            columnNumber: 7\n          }, this), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 111,\n            columnNumber: 7\n          }, this), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 112,\n            columnNumber: 7\n          }, this), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 113,\n            columnNumber: 7\n          }, this), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 114,\n            columnNumber: 7\n          }, this), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 115,\n            columnNumber: 7\n          }, this), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 116,\n            columnNumber: 7\n          }, this), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 117,\n            columnNumber: 7\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 109,\n          columnNumber: 6\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 108,\n        columnNumber: 5\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 107,\n      columnNumber: 4\n    }, this), /*#__PURE__*/_jsxDEV(TransitionGroup, {\n      style: {\n        position: \"relative\"\n      },\n      children: /*#__PURE__*/_jsxDEV(ReactTransition, {\n        timeout: {\n          enter: transitionDuration * 1000,\n          exit: transitionDuration * 1000\n        },\n        addEndListener: onEndListener,\n        onEntering: onEntering,\n        onExit: onExit,\n        children: status => /*#__PURE__*/_jsxDEV(_Fragment, {\n          children: children\n        }, void 0, false)\n      }, location, false, {\n        fileName: _jsxFileName,\n        lineNumber: 128,\n        columnNumber: 5\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 127,\n      columnNumber: 4\n    }, this)]\n  }, void 0, true);\n};\n\nexport default Transition;","map":{"version":3,"sources":["/home/gkkdzdg/www/src/layouts/Transition.js"],"names":["useCallback","useEffect","useRef","useState","gsap","TransitionGroup","Transition","ReactTransition","cn","styles","useMouseEvents","useWindowScroll","mouseY","scrollY","children","location","transitionDuration","onMouseUp","event","clientY","_","window","onExit","node","mainElement","style","position","top","transform","svgClip","document","querySelector","docWidth","screen","width","innerWidth","docHeight","height","innerHeight","length","strips","duration","ease","originY","i","topRect","bottomRect","j","xWidth","x","tl","timeline","fromTo","y","clipPath","to","onComplete","ended","onEntering","isAppearing","zIndex","onEndListener","done","svg","enter","exit","status"],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport gsap from 'gsap'\nimport { TransitionGroup, Transition as ReactTransition, } from 'react-transition-group'\n\nimport cn from 'classnames'\nimport styles from './Transition.module.scss'\nimport { useMouseEvents, useWindowScroll } from 'beautiful-react-hooks'\n\nlet mouseY = 0\nlet scrollY = 0\n\nconst Transition = ({ children, location }) => {\n\n\tconst transitionDuration = 1.8\n\n\tuseMouseEvents().onMouseUp(event => {\n\t\tmouseY = event.clientY\n\t})\n\n\tuseWindowScroll(_ => {\n\t\tscrollY = window.scrollY\n\t})\n\n\n\tconst onExit = useCallback((node) => {\n\t\tconst mainElement = node//.querySelector('main')\n\n\t\tmainElement.style.position = 'fixed'\n\t\tmainElement.style.top = 0\n\t\tmainElement.style.transform = `translateY(${-scrollY}px)`\n\n\t\tconst svgClip = document.querySelector('#clip')\n\t\tconst children = svgClip.children\n\t\tconst docWidth = screen ? screen.width : window.innerWidth\n\t\tconst docHeight = screen ? screen.height : window.innerHeight\n\t\tconst length = children.length\n\t\tconst strips = length / 2\n\t\tconst duration = transitionDuration / 2\n\t\tconst ease = 'power3.inOut'\n\t\tconst originY = mouseY > 60 ? mouseY : docHeight / 2\n\t\tfor (let i = 0; i < length; i += 2) {\n\t\t\tlet topRect = children[i]\n\t\t\tlet bottomRect = children[i + 1]\n\t\t\tconst j = i / 2\n\n\t\t\tconst xWidth = {\n\t\t\t\tx: j * docWidth / strips,\n\t\t\t\twidth: docWidth / strips + 1,\n\t\t\t}\n\n\t\t\tconst tl = gsap.timeline()\n\n\t\t\ttl.fromTo(topRect, {\n\t\t\t\t...xWidth,\n\t\t\t\ty: scrollY,\n\t\t\t\theight: originY,\n\t\t\t}, {\n\t\t\t\tduration,\n\t\t\t\t//ease: (j % 2) ? 'power3.in' : 'power3.out',\n\t\t\t\tease,\n\t\t\t\theight: 0,\n\t\t\t}, (j % 2) ? 0 : duration)\n\n\t\t\ttl.fromTo(bottomRect, {\n\t\t\t\t...xWidth,\n\t\t\t\ty: scrollY + originY,\n\t\t\t\theight: docHeight - originY,\n\t\t\t}, {\n\t\t\t\tduration,\n\t\t\t\t//ease: (j % 2) ? 'power3.out' : 'power3.in',\n\t\t\t\tease,\n\t\t\t\ty: scrollY + docHeight,\n\t\t\t\theight: 0,\n\t\t\t}, (j % 2) ? duration : 0)\n\t\t}\n\n\t\tmainElement.style.clipPath = 'url(#clip)'\n\n\t\tgsap.to(mainElement, {\n\t\t\tduration: transitionDuration,\n\t\t\tonComplete: () => {\n\t\t\t\tmainElement.style.clipPath = null\n\t\t\t\tnode.ended()\n\t\t\t},\n\t\t})\n\t}, [])\n\tconst onEntering = useCallback((node, isAppearing) => {\n\t\tconst mainElement = node//.querySelector('main')\n\t\tmainElement.style.zIndex = -1000\n\n\t\tgsap.to(node, {\n\t\t\tduration: transitionDuration,\n\t\t\tonComplete: () => {\n\t\t\t\tmainElement.style.zIndex = ''\n\t\t\t\tnode.ended()\n\t\t\t},\n\t\t})\n\t}, [])\n\tconst onEndListener = useCallback((node, done) => {\n\t\tnode.ended = () => {\n\t\t\tdone()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<>\n\t\t\t<svg width=\"0\" height=\"0\" className={cn(styles.svg)}>\n\t\t\t\t<defs>\n\t\t\t\t\t<clipPath id=\"clip\">\n\t\t\t\t\t\t<rect />\n\t\t\t\t\t\t<rect />\n\t\t\t\t\t\t<rect />\n\t\t\t\t\t\t<rect />\n\t\t\t\t\t\t<rect />\n\t\t\t\t\t\t<rect />\n\t\t\t\t\t\t<rect />\n\t\t\t\t\t\t<rect />\n\n\t\t\t\t\t\t{/* <rect />\n\t\t\t\t\t\t<rect />\n\t\t\t\t\t\t<rect />\n\t\t\t\t\t\t<rect /> */}\n\t\t\t\t\t</clipPath>\n\t\t\t\t</defs>\n\t\t\t</svg>\n\n\t\t\t<TransitionGroup style={{ position: \"relative\" }}>\n\t\t\t\t<ReactTransition\n\t\t\t\t\tkey={location}\n\t\t\t\t\ttimeout={{\n\t\t\t\t\t  enter: transitionDuration*1000,\n\t\t\t\t\t  exit: transitionDuration*1000,\n\t\t\t\t\t}}\n\t\t\t\t\taddEndListener={onEndListener}\n\t\t\t\t\tonEntering={onEntering}\n\t\t\t\t\tonExit={onExit}\n\t\t\t\t>\n\t\t\t\t\t{status => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</ReactTransition>\n\t\t\t</TransitionGroup>\n\t\t</>\n\t)\n}\n\nexport default Transition"]},"metadata":{},"sourceType":"module"}