82 lines
1.8 KiB
PHP
82 lines
1.8 KiB
PHP
<script>
|
|
{
|
|
let lenis;
|
|
|
|
const initScroll = () => {
|
|
lenis = new Lenis({});
|
|
lenis.on("scroll", ScrollTrigger.update);
|
|
gsap.ticker.add((time) => lenis.raf(time * 1000));
|
|
gsap.ticker.lagSmoothing(0);
|
|
};
|
|
|
|
function initGsapGlobal() {
|
|
/** Do everything that needs to happen
|
|
* before triggering all
|
|
* the gsap animations */
|
|
|
|
initScroll();
|
|
|
|
// match reduced motion media
|
|
// const media = gsap.matchMedia();
|
|
|
|
/** Send a custom
|
|
* event to all your
|
|
* gsap animations
|
|
* to start them */
|
|
|
|
const sendGsapEvent = () => {
|
|
window.dispatchEvent(
|
|
new CustomEvent("GSAPReady", {
|
|
detail: {
|
|
lenis,
|
|
},
|
|
})
|
|
);
|
|
};
|
|
|
|
// Check if fonts are already loaded
|
|
if (document.fonts.status === "loaded") {
|
|
sendGsapEvent();
|
|
} else {
|
|
document.fonts.ready.then(() => {
|
|
sendGsapEvent();
|
|
});
|
|
}
|
|
|
|
/** We need specific handling because the
|
|
* grid/list changes the scroll height of the whole container
|
|
*/
|
|
|
|
let resizeTimeout;
|
|
const onResize = () => {
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(() => {
|
|
ScrollTrigger.refresh();
|
|
}, 50);
|
|
};
|
|
|
|
window.addEventListener("resize", () => onResize());
|
|
const resizeObserver = new ResizeObserver((entries) => onResize());
|
|
resizeObserver.observe(document.body);
|
|
|
|
queueMicrotask(() => {
|
|
gsap.to("[data-start='hidden']", {
|
|
autoAlpha: 1,
|
|
duration: 0.1,
|
|
delay: 0.2,
|
|
});
|
|
});
|
|
}
|
|
|
|
// this only for dev
|
|
const documentReady =
|
|
document.readyState === "complete" || document.readyState === "interactive";
|
|
|
|
if (documentReady) {
|
|
initGsapGlobal();
|
|
} else {
|
|
addEventListener("DOMContentLoaded", (event) => initGsapGlobal());
|
|
}
|
|
}
|
|
</script>
|