{"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 =\n    /*screen ? screen.height :*/\n    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 > 75 ? 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    const position = mainElement.style.position;\n    mainElement.style.position = 'fixed';\n    gsap.to(node, {\n      duration: transitionDuration,\n      onComplete: () => {\n        mainElement.style.zIndex = '';\n        mainElement.style.position = position;\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: 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), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 118,\n            columnNumber: 7\n          }, this), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 119,\n            columnNumber: 7\n          }, this), /*#__PURE__*/_jsxDEV(\"rect\", {}, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 120,\n            columnNumber: 7\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 112,\n          columnNumber: 6\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 111,\n        columnNumber: 5\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 110,\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: 131,\n        columnNumber: 5\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 130,\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","innerHeight","length","strips","duration","ease","originY","i","topRect","bottomRect","j","xWidth","x","tl","timeline","fromTo","y","height","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 > 75 ? 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\t\tconst position = mainElement.style.position\n\t\tmainElement.style.position = 'fixed'\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\tmainElement.style.position = position\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"}