{"version":3,"file":"elements-scrollable-slider.js","mappings":"yJAGAA,EAAAA,GAAKC,eAAeC,EAAAA,GAEpB,MAAMC,EAAaA,KACjBC,SAASC,iBAAiB,6BAA6BC,SAASC,IAC9D,MAAMC,EAAkBD,EAAGE,cAAc,qBACnCC,EAASH,EAAGF,iBAAiB,UAE7BM,EAAYC,MAAMC,KAAKH,GAAQI,QAAO,CAACH,EAAWI,KACtD,MAAMC,EAAcD,EAAME,aAC1B,OAAOC,KAAKC,IAAIR,EAAWK,EAAY,GACtC,GAEHR,EAAgBY,MAAMC,UAAY,GAAGV,KAAa,GAClD,EAGJP,SAASC,iBAAiB,6BAA6BC,SAASC,IAC9D,MAAMe,EAAWf,EAAGE,cAAc,cAC5Bc,EAAgBhB,EAAGE,cAAc,oBACjCC,EAASH,EAAGF,iBAAiB,UAC7BmB,EAAYd,EAAOe,OAEnBC,EAAiB1B,EAAAA,GAAK2B,SAAS,CACnCC,QAAQ,IAGVlB,EAAOJ,SAAQ,CAACS,EAAOc,KACrBH,EAAeI,GAAGf,EAAO,CAAEgB,QAAS,IAEhCF,IAAUL,EAAY,EACxBE,EAAeI,GAAGf,EAAO,CAAEgB,QAAS,IAEpCL,EAAeI,GAAGf,EAAO,CAAEgB,QAAS,GACtC,IAGe/B,EAAAA,GAAK2B,SAAS,CAC7BC,QAAQ,EACRI,cAAe,CACbC,QAAS1B,EAAGE,cAAc,sBAC1ByB,MAAOA,IAGE,OAFkB9B,SAASK,cAAc,gBAAgBQ,eAIlEkB,IAAK,WAAuB,GAAZX,SAChBY,MAAO,IACPC,KAAK,EACLC,SAAS,EACTC,SAAWP,IACTN,EAAec,SAASR,EAAcQ,SAAW,GAAI,KAKlDV,GAAGP,EAAe,CACzBkB,EAAGA,KACD,MAAMC,EAAUpB,EAASqB,wBACnBC,EAAYrB,EAAcoB,wBAEhC,OAAOD,EAAQG,OAASD,EAAUC,MAAM,GAE1C,IAGJ1C,IAEA2C,OAAOC,iBAAiB,SAAU5C,E","sources":["webpack://silverstripe-base/./themes/app/src/elements/scrollable-slider.js"],"sourcesContent":["import { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst setHeights = () => {\n  document.querySelectorAll(\".element-scrollableslider\").forEach((el) => {\n    const slidesContainer = el.querySelector(\".slides-container\");\n    const slides = el.querySelectorAll(\".slide\");\n\n    const maxHeight = Array.from(slides).reduce((maxHeight, slide) => {\n      const slideHeight = slide.offsetHeight;\n      return Math.max(maxHeight, slideHeight);\n    }, 0);\n\n    slidesContainer.style.minHeight = `${maxHeight}px`;\n  });\n};\n\ndocument.querySelectorAll(\".element-scrollableslider\").forEach((el) => {\n  const slidePos = el.querySelector(\".slide-pos\");\n  const slidePosIndex = el.querySelector(\".slide-pos-index\");\n  const slides = el.querySelectorAll(\".slide\");\n  const numSlides = slides.length;\n\n  const slidesTimeline = gsap.timeline({\n    paused: true,\n  });\n\n  slides.forEach((slide, index) => {\n    slidesTimeline.to(slide, { opacity: 1 });\n\n    if (index === numSlides - 1) {\n      slidesTimeline.to(slide, { opacity: 1 });\n    } else {\n      slidesTimeline.to(slide, { opacity: 0 });\n    }\n  });\n\n  const timeline = gsap.timeline({\n    paused: true,\n    scrollTrigger: {\n      trigger: el.querySelector(\".element-container\"),\n      start: () => {\n        const siteHeaderHeight = document.querySelector(\".site-header\").offsetHeight;\n\n        return `top ${siteHeaderHeight}`;\n      },\n      end: `bottom+=${numSlides * 50}% top`,\n      scrub: 1.5,\n      pin: true,\n      markers: false,\n      onUpdate: (scrollTrigger) => {\n        slidesTimeline.progress(scrollTrigger.progress + 0.1);\n      },\n    },\n  });\n\n  timeline.to(slidePosIndex, {\n    y: () => {\n      const posRect = slidePos.getBoundingClientRect();\n      const indexRect = slidePosIndex.getBoundingClientRect();\n\n      return posRect.bottom - indexRect.bottom;\n    },\n  });\n});\n\nsetHeights();\n\nwindow.addEventListener(\"resize\", setHeights);\n"],"names":["gsap","registerPlugin","ScrollTrigger","setHeights","document","querySelectorAll","forEach","el","slidesContainer","querySelector","slides","maxHeight","Array","from","reduce","slide","slideHeight","offsetHeight","Math","max","style","minHeight","slidePos","slidePosIndex","numSlides","length","slidesTimeline","timeline","paused","index","to","opacity","scrollTrigger","trigger","start","end","scrub","pin","markers","onUpdate","progress","y","posRect","getBoundingClientRect","indexRect","bottom","window","addEventListener"],"sourceRoot":""}