Mattiabf

Good morning, I have smooth scroller active on a website, but it gets stuck after barba.js transitioning. I reviewed some older topics here, but even though I found many, I wasn't able to understand how to fix it. I understood that I need to "clean" and restart scrollSmoother/Trigger after transition, but then wasn't able to do it. This is my code. Could you please help? barba.init({ debug: true, sync: true, timeout: 10000, transitions: [{ name: 'opacity-transition', once(data) { document.addEventListener("DOMContentLoaded", function () { var tl = gsap.timeline(); tl .to(".transoverlay", { opacity: 0 }) .set(".transoverlay", { display: "none" }) .from('#masthead', { opacity: 0, y: 5 }, 4) .from('.fadein', { opacity: 0, y: 5 }); }); }, before(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: resolve }); timeline .set(".pageTitle", { display: "none" }) .set(".transoverlay", { top: "-100vh", opacity: 1, display: "flex" }) .to(".transoverlay", { y: "100vh", opacity: 1, duration: 0.5 }) .to(".blslogo", { display: "block", opacity: 1, duration: 0.5 }) .to(data.current.container, { opacity: 0 }, 0.2) .to(".nextPage", { display: "block", opacity: 1, duration: 0.2 }) .to(window, { scrollTo: { y: 0 } }); }); }, beforeEnter(data) { return new Promise((resolve) => { const barbaNamespace = data.next.container.getAttribute('data-barba-namespace'); const pageTitle = document.getElementById('wipertitle'); pageTitle.innerHTML = barbaNamespace; const timeline = gsap.timeline({ onComplete: resolve }); timeline .set("#wipertitle", { display: "block" }) .from("#wipertitle", { opacity: 0, y: 5, duration: 0.5 }) .set("#wipertitle", { display: "block", onComplete: resolve }, -0.5); }); }, enter(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: resolve }); timeline .to(data.next.container, { opacity: 1 }); }); }, after(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: resolve }); timeline .to("#wipercontent", { opacity: 0, duration: 0.5 }) .to(".transoverlay", { y: "200vh", opacity: 0, duration: 0.5, display: "none" }) .set("#wipercontent", { opacity: 1 }) .set(".blslogo", { opacity: 0, display: "none" }); }); } }] });

Hi everyone! Just a simple question: where do you prefer to enqueue gsap scripts? I would like to place them in footer to increase website performance, but they have issues if for whatever reason the script contains animation loads before them. Also, I find that some plugins (ex. Flip) works only if they are placed in footer (for me, at least). What is your choice?