{"version":3,"file":"PhotoScrollOverlay.js","names":["define","gsap","ScrollTrigger","initPhotoScrollOverlay","args","scrollTrack","scope","querySelector","pinContainer","contentContainer","imageContainer","querySelectorAll","contentTimeline","imageTimeline","mql","window","matchMedia","setupTimeline","pinDistance","getComputedStyle","getPropertyValue","registerPlugin","timeline","scrollTrigger","trigger","start","end","scrub","pin","pinSpacing","onLeave","style","position","transform","translateYDistance","to","y","getBoundingClientRect","height","matches","addEventListener","event","kill","set","clearProps","ResizeObserver","refresh","observe","document","body"],"sources":["site/Components/PhotoScrollOverlay.js"],"mappings":"AAAAA,OAAO,CAAC,OAAQ,sBAAsB,UAAUC,KAAEA,IAAQC,cAAEA,IAC1D,MAAMC,EAA0BC,IAC9B,MAAMC,EAAcD,EAAKE,MAAMC,cAC7B,uCAEIC,EAAeJ,EAAKE,MAAMC,cAC9B,wCAEIE,EAAmBL,EAAKE,MAAMC,cAClC,kCAEIG,EAAiBN,EAAKE,MAAMK,iBAChC,iCAGF,KAAKF,GAAqBJ,GAAgBG,GAAiBE,GACzD,OAGF,IAAIE,EACAC,EAEJ,MACMC,EAAMC,OAAOC,WADM,sBAezB,SAASC,IACP,MAAMC,EAAcC,iBAAiBf,EAAKE,OAAOc,iBAC/C,4CAGFnB,EAAKoB,eAAenB,GACpBU,EAAkBX,EAAKqB,SAAS,CAC9BC,cAAe,CACbC,QAASnB,EACToB,MAAO,UACPC,IAAK,IAAM,KAAKR,IAChBS,OAAO,EACPC,IAAKpB,EACLqB,YAAY,EAEZC,UAGEtB,EAAauB,MAAMC,SAAW,SAC9BxB,EAAauB,MAAME,UAAY,kBAAkBf,IACnD,KAKJ,MAAMgB,EAAqBf,iBAAiBf,EAAKE,OAAOc,iBACtD,yDAEFR,EAAgBuB,GAAG1B,EAAkB,CAAE2B,EAAG,IAAIF,MAE9CrB,EAAgBZ,EAAKqB,SAAS,CAC5BC,cAAe,CACbC,QAASpB,EAAKE,MACdmB,MAAO,UACPC,IAAK,IAAM,KAAiD,IAA5CtB,EAAKE,MAAM+B,wBAAwBC,OACnDX,OAAO,KAKXd,EAAcsB,GAAGzB,EAAgB,CAAE0B,GAAI,IACzC,CArDItB,EAAIyB,SACNtB,IAGFH,EAAI0B,iBAAiB,UAAWC,IAC1BA,EAAMF,QACRtB,KAkDFL,EAAgBW,cAAcmB,MAAK,GACnC9B,EAAgB8B,MAAK,GACrB7B,EAAcU,cAAcmB,MAAK,GACjC7B,EAAc6B,MAAK,GACnBzC,EAAK0C,IACH,CACEtC,EACAI,EACAD,EACAJ,EAAKE,MACLI,GAEF,CACEkC,YAAY,IA5DhB,IAkEF,IAAIC,gBAAe,KACjBjC,GAAiBW,eAAeuB,UAChCjC,GAAeU,eAAeuB,SAAS,IACtCC,QAAQC,SAASC,KAAK,EAG3B,OAAO,SAAc7C,GACnBD,EAAuBC,EACzB,CACF","sourcesContent":["define([\"gsap\", \"gsapScrollTrigger\"], function ({ gsap }, { ScrollTrigger }) {\r\n  const initPhotoScrollOverlay = (args) => {\r\n    const scrollTrack = args.scope.querySelector(\r\n      \".photo-scroll-overlay__scroll-track\"\r\n    );\r\n    const pinContainer = args.scope.querySelector(\r\n      \".photo-scroll-overlay__pin-container\"\r\n    );\r\n    const contentContainer = args.scope.querySelector(\r\n      \".photo-scroll-overlay__content\"\r\n    );\r\n    const imageContainer = args.scope.querySelectorAll(\r\n      \".photo-scroll-overlay__images\"\r\n    );\r\n\r\n    if (!contentContainer || !scrollTrack || !pinContainer || !imageContainer) {\r\n      return;\r\n    }\r\n\r\n    let contentTimeline;\r\n    let imageTimeline;\r\n\r\n    const tabletBreakpoint = \"(min-width: 768px)\";\r\n    const mql = window.matchMedia(tabletBreakpoint);\r\n\r\n    if (mql.matches) {\r\n      setupTimeline();\r\n    }\r\n\r\n    mql.addEventListener(\"change\", (event) => {\r\n      if (event.matches) {\r\n        setupTimeline();\r\n      } else {\r\n        clearTimeline();\r\n      }\r\n    });\r\n\r\n    function setupTimeline() {\r\n      const pinDistance = getComputedStyle(args.scope).getPropertyValue(\r\n        \"--photo-scroll-overlay__pinning-distance\"\r\n      );\r\n\r\n      gsap.registerPlugin(ScrollTrigger);\r\n      contentTimeline = gsap.timeline({\r\n        scrollTrigger: {\r\n          trigger: scrollTrack,\r\n          start: `top 50%`,\r\n          end: () => `+=${pinDistance}`,\r\n          scrub: true,\r\n          pin: pinContainer,\r\n          pinSpacing: false,\r\n          //   markers: true,\r\n          onLeave() {\r\n            // ScrollTrigger is sometimes buggy and does not remove pinning.\r\n            // These styles will ensure that the pinning is removed.\r\n            pinContainer.style.position = \"static\";\r\n            pinContainer.style.transform = `translate(0px, ${pinDistance})`;\r\n          },\r\n        },\r\n      });\r\n\r\n      // Get value of CSS variable\r\n      const translateYDistance = getComputedStyle(args.scope).getPropertyValue(\r\n        \"--photo-scroll-overlay__content-container-translate-y\"\r\n      );\r\n      contentTimeline.to(contentContainer, { y: `-${translateYDistance}` });\r\n\r\n      imageTimeline = gsap.timeline({\r\n        scrollTrigger: {\r\n          trigger: args.scope,\r\n          start: `top 50%`,\r\n          end: () => `+=${args.scope.getBoundingClientRect().height * 0.75}`,\r\n          scrub: true,\r\n          //   markers: true,\r\n        },\r\n      });\r\n\r\n      imageTimeline.to(imageContainer, { y: -75 });\r\n    }\r\n\r\n    function clearTimeline() {\r\n      contentTimeline.scrollTrigger.kill(true);\r\n      contentTimeline.kill(true);\r\n      imageTimeline.scrollTrigger.kill(true);\r\n      imageTimeline.kill(true);\r\n      gsap.set(\r\n        [\r\n          scrollTrack,\r\n          contentContainer,\r\n          pinContainer,\r\n          args.scope,\r\n          imageContainer,\r\n        ],\r\n        {\r\n          clearProps: true,\r\n        }\r\n      );\r\n    }\r\n\r\n    // refresh scrolltrigger when the page content height changes\r\n    new ResizeObserver(() => {\r\n      contentTimeline?.scrollTrigger?.refresh();\r\n      imageTimeline?.scrollTrigger?.refresh();\r\n    }).observe(document.body);\r\n  };\r\n\r\n  return function init(args) {\r\n    initPhotoScrollOverlay(args);\r\n  };\r\n});\r\n"]}