{"ast":null,"code":"import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport { 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\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';\nvar mouseY = 0;\nvar scrollY = 0;\n\nvar Transition = function Transition(_ref) {\n  var _children = _ref.children,\n      location = _ref.location;\n  var transitionDuration = 1.8;\n  useMouseEvents().onMouseUp(function (event) {\n    mouseY = event.clientY;\n  });\n  useWindowScroll(function (_) {\n    scrollY = window.scrollY;\n  });\n  var onExit = useCallback(function (node) {\n    var mainElement = node; //.querySelector('main')\n\n    mainElement.style.position = 'fixed';\n    mainElement.style.top = 0;\n    mainElement.style.transform = \"translateY(\".concat(-scrollY, \"px)\");\n    var svgClip = document.querySelector('#clip');\n    var children = svgClip.children;\n    var docWidth = screen ? screen.width : window.innerWidth;\n    var docHeight = screen ? screen.height : window.innerHeight;\n    var length = children.length;\n    var strips = length / 2;\n    var duration = transitionDuration / 2;\n    var ease = 'power3.inOut';\n    var originY = mouseY > 60 ? mouseY : docHeight / 2;\n\n    for (var i = 0; i < length; i += 2) {\n      var topRect = children[i];\n      var bottomRect = children[i + 1];\n      var j = i / 2;\n      var xWidth = {\n        x: j * docWidth / strips,\n        width: docWidth / strips + 1\n      };\n      var tl = gsap.timeline();\n      tl.fromTo(topRect, _objectSpread(_objectSpread({}, xWidth), {}, {\n        y: scrollY,\n        height: originY\n      }), {\n        duration: duration,\n        //ease: (j % 2) ? 'power3.in' : 'power3.out',\n        ease: 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: duration,\n        //ease: (j % 2) ? 'power3.out' : 'power3.in',\n        ease: 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: function onComplete() {\n        mainElement.style.clipPath = null;\n        node.ended();\n      }\n    });\n  }, []);\n  var onEntering = useCallback(function (node, isAppearing) {\n    var mainElement = node; //.querySelector('main')\n\n    mainElement.style.zIndex = -1000;\n    gsap.to(node, {\n      duration: transitionDuration,\n      onComplete: function onComplete() {\n        mainElement.style.zIndex = '';\n        node.ended();\n      }\n    });\n  }, []);\n  var onEndListener = useCallback(function (node, done) {\n    node.ended = function () {\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: function children(status) {\n          return /*#__PURE__*/_jsx(_Fragment, {\n            children: _children\n          });\n        }\n      }, location)\n    })]\n  });\n};\n\nexport default Transition;","map":null,"metadata":{},"sourceType":"module"}