{"version":3,"file":"elements-our-difference.7ac616125280055a831d.js","mappings":"6IAGAA,EAAAA,GAAKC,eAAeC,EAAAA,GAEpBC,SAASC,iBAAiB,0BAA0BC,SAASC,IAC3D,MAAMC,EAASD,EAAGF,iBAAiB,kBAC7BI,EAAoBF,EAAGG,cAAc,+BACrCC,EAAkBJ,EAAGF,iBAAiB,4BACtCO,EAAeL,EAAGG,cAAc,kBAChCG,EAAYL,EAAOM,OAEzB,GAAIC,OAAOC,WAAW,sBAAsBC,QAAS,CACnD,MAAMC,EAAUX,EAAGG,cAAc,mBAC3BS,EAAoBD,EAAQR,cAAc,wBAEhDT,EAAAA,GAAKmB,GAAGZ,EAAQ,CACda,UAAW,KAAOR,EAAY,GAC9BS,KAAM,OACNC,cAAe,CACbL,QAASA,EACTM,KAAK,EACLC,SAAS,EACTC,MAAO,EACPC,MAAOA,KACL,MAAMC,EAAoBC,SACxBd,OAAOe,iBAAiBX,EAAmB,MAAMY,iBAAiB,gBAE9DC,EAAmB5B,SAASM,cAAc,gBAAgBuB,aAAeL,EAAoB,IAGnG,OAFArB,EAAG2B,MAAMC,YAAY,yBAA6BP,EAAoB,KAAtB,MAExC,OAAMI,GAAkB,EAElCI,IAAKA,IAAO,KAA2B,EAAvBlB,EAAQe,aACxBI,SAAWC,IACT,MAAMC,EAAMC,KAAKC,MAAMH,EAAKI,SAAW7B,GACjC8B,EAAQJ,GAAO1B,EAAYA,EAAY0B,EAAM,EAEnD5B,EAAgBL,SAASsC,IACnBf,SAASe,EAAEC,QAAQF,QAAUA,EAC/BC,EAAEE,UAAUC,IAAI,aAEhBH,EAAEE,UAAUE,OAAO,YACrB,IAGFpC,EAAaP,iBAAiB,uBAAuBC,SAASsC,GAAMA,EAAEE,UAAUE,OAAO,eACvFpC,EAAaF,cAAe,mCAAkCiC,OAAWG,UAAUC,IAAI,aAEvFtC,EAAkByB,MAAMe,OAA4B,IAAhBX,EAAKI,SAAP,GAAwB,IAIlE,KAAO,CACL,MAAMxB,EAAUX,EAAGG,cAAc,sBAEjCT,EAAAA,GAAKmB,GAAGZ,EAAQ,CACd0C,UAAW,KAAOrC,EAAY,GAC9BS,KAAM,OACNC,cAAe,CACbL,QAASA,EACTM,KAAK,EACLC,SAAS,EACTC,MAAO,EACPC,MAAOA,IAGG,OAFiBvB,SAASM,cAAc,gBAAgBuB,eAIlEG,IAAKA,IAAO,KAA0B,EAAtBlB,EAAQiC,YACxBd,SAAWC,IACT,MAAMC,EAAMC,KAAKC,MAAMH,EAAKI,SAAW7B,GACjC8B,EAAQJ,GAAO1B,EAAYA,EAAY0B,EAAM,EAEnD5B,EAAgBL,SAASsC,IACnBf,SAASe,EAAEC,QAAQF,QAAUA,EAC/BC,EAAEE,UAAUC,IAAI,aAEhBH,EAAEE,UAAUE,OAAO,YACrB,IAGFpC,EAAaP,iBAAiB,uBAAuBC,SAASsC,GAAMA,EAAEE,UAAUE,OAAO,eACvFpC,EAAaF,cAAe,mCAAkCiC,OAAWG,UAAUC,IAAI,aAEvFtC,EAAkByB,MAAMkB,MAA2B,IAAhBd,EAAKI,SAAP,GAAwB,IAIjE,I","sources":["webpack://silverstripe-base/./themes/app/src/elements/our-difference.js"],"sourcesContent":["import { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\n\ngsap.registerPlugin(ScrollTrigger)\n\ndocument.querySelectorAll('.element-ourdifference').forEach((el) => {\n  const panels = el.querySelectorAll('.element-panel')\n  const indicatorProgress = el.querySelector('.element-indicator-progress')\n  const indicatorBlocks = el.querySelectorAll('.element-indicator-block')\n  const elementMedia = el.querySelector('.element-media')\n  const numPanels = panels.length\n\n  if (window.matchMedia('(min-width: 768px)').matches) {\n    const trigger = el.querySelector('.scroll-trigger')\n    const sectionContentTop = trigger.querySelector('.section-content-top')\n\n    gsap.to(panels, {\n      yPercent: -100 * (numPanels - 1),\n      ease: 'none',\n      scrollTrigger: {\n        trigger: trigger,\n        pin: true,\n        markers: false,\n        scrub: 1,\n        start: () => {\n          const contentTopPadding = parseInt(\n            window.getComputedStyle(sectionContentTop, null).getPropertyValue('padding-top')\n          )\n          const siteHeaderHeight = document.querySelector('.site-header').offsetHeight - contentTopPadding / 1.5\n          el.style.setProperty('--_scroll-start-offset', `${contentTopPadding / 1.25}px`)\n\n          return `top ${siteHeaderHeight}`\n        },\n        end: () => `+=${trigger.offsetHeight * 2}`,\n        onUpdate: (self) => {\n          const pos = Math.floor(self.progress * numPanels)\n          const index = pos >= numPanels ? numPanels : pos + 1\n\n          indicatorBlocks.forEach((x) => {\n            if (parseInt(x.dataset.index) <= index) {\n              x.classList.add('is-active')\n            } else {\n              x.classList.remove('is-active')\n            }\n          })\n\n          elementMedia.querySelectorAll('.element-media-item').forEach((x) => x.classList.remove('is-active'))\n          elementMedia.querySelector(`.element-media-item[data-index=\"${index}\"]`).classList.add('is-active')\n\n          indicatorProgress.style.height = `${self.progress * 100}%`\n        },\n      },\n    })\n  } else {\n    const trigger = el.querySelector('.scroll-trigger-sm')\n\n    gsap.to(panels, {\n      xPercent: -100 * (numPanels - 1),\n      ease: 'none',\n      scrollTrigger: {\n        trigger: trigger,\n        pin: true,\n        markers: false,\n        scrub: 1,\n        start: () => {\n          const siteHeaderHeight = document.querySelector('.site-header').offsetHeight\n\n          return `top ${siteHeaderHeight}`\n        },\n        end: () => `+=${trigger.offsetWidth * 2}`,\n        onUpdate: (self) => {\n          const pos = Math.floor(self.progress * numPanels)\n          const index = pos >= numPanels ? numPanels : pos + 1\n\n          indicatorBlocks.forEach((x) => {\n            if (parseInt(x.dataset.index) <= index) {\n              x.classList.add('is-active')\n            } else {\n              x.classList.remove('is-active')\n            }\n          })\n\n          elementMedia.querySelectorAll('.element-media-item').forEach((x) => x.classList.remove('is-active'))\n          elementMedia.querySelector(`.element-media-item[data-index=\"${index}\"]`).classList.add('is-active')\n\n          indicatorProgress.style.width = `${self.progress * 100}%`\n        },\n      },\n    })\n  }\n})\n"],"names":["gsap","registerPlugin","ScrollTrigger","document","querySelectorAll","forEach","el","panels","indicatorProgress","querySelector","indicatorBlocks","elementMedia","numPanels","length","window","matchMedia","matches","trigger","sectionContentTop","to","yPercent","ease","scrollTrigger","pin","markers","scrub","start","contentTopPadding","parseInt","getComputedStyle","getPropertyValue","siteHeaderHeight","offsetHeight","style","setProperty","end","onUpdate","self","pos","Math","floor","progress","index","x","dataset","classList","add","remove","height","xPercent","offsetWidth","width"],"sourceRoot":""}