{"ast":null,"code":"import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-runtime\";\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__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(\"svg\", {\n      width: \"0\",\n      height: \"0\",\n      className: cn(styles.svg),\n      children: /*#__PURE__*/_jsx(\"defs\", {\n        children: /*#__PURE__*/_jsxs(\"clipPath\", {\n          id: \"clip\",\n          children: [/*#__PURE__*/_jsx(\"rect\", {}), /*#__PURE__*/_jsx(\"rect\", {}), /*#__PURE__*/_jsx(\"rect\", {}), /*#__PURE__*/_jsx(\"rect\", {}), /*#__PURE__*/_jsx(\"rect\", {}), /*#__PURE__*/_jsx(\"rect\", {}), /*#__PURE__*/_jsx(\"rect\", {}), /*#__PURE__*/_jsx(\"rect\", {})]\n        })\n      })\n    }), /*#__PURE__*/_jsx(TransitionGroup, {\n      style: {\n        position: \"relative\"\n      },\n      children: /*#__PURE__*/_jsx(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__*/_jsx(_Fragment, {\n          children: children\n        })\n      }, location)\n    })]\n  });\n};\n\nexport default Transition;","map":null,"metadata":{},"sourceType":"module"}