nicolatrabace

Hi Zach, thank you very much for your quick reply. As per your request, I reply to update you on the solution. In the end, with a lot of patience, I followed your advice and tried to find the "catch". Basically the problem was "logical". Instead of calling the init (of all functions with gsap animations) "on start" during the outgoing animation phase, it must be called during the "beforeEnter" phase of Barba.js, after the kill of all timelines destruction of the scroll and re-initialization of the scroll. (order is essential). function pageTransitionOut({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' }, // DON'T DO THAT /* onStart: () => { window.scrollTo(0, 0); initScript(); } */ }); tl .to(loader, { yPercent: -100 }) return tl; } // DO THAT barba.init({ sync:true, transitions: [{ name: 'overlay-transition', once(data) { initSmoothScroll(data.next.container); initLoader(); }, async leave(data) { pageTransitionIn(data.current); await delay(1000); data.current.container.remove(); }, async beforeEnter(data) { // FOLLOW THIS ORDER ScrollTrigger.getAll().forEach(tl => tl.kill()); scroll.destroy(); initSmoothScroll(data.next.container); initScript(); // init with all your gsap animations }, async enter(data) { pageTransitionOut(data.next); } }] }); Hope this can help someone.

Hello, I write in the hope of finding a solution to my problem. I am running a website using Gsap (ScrollTrigger), Barba.Js, LocomotiveScroll. Basically when I perform the first page load, the trigger is well positioned (in the middle of the page as in the first image in attached) and everything works perfectly. The problem comes when I change the page (whatever it is). I don't know why the trigger (I use the first navbar as an example, but consequently they all have the same problem) have an offset (see second image). I extrapolate the part of the code that I think (probably) needs to be revised. // NAVBAR function gsapAnim(){ const bg = gsap.timeline({ scrollTrigger: { trigger: "#HPTrigger", scroller: ".smooth-scroll", start: "center top", end: "bottom top", duration: 1, ease: "power4.out", toggleActions: 'play none reverse none', markers: true } }); bg.to(".bg-navbar", {backgroundColor:"rgba(255,255,255,1)"},0); bg.to(".leftline", {borderLeft:"1px solid rgba(230,230,230,1)"},0); bg.to(".rightline", {borderRight:"1px solid rgba(230,230,230,1)"},0); bg.to(".bottomline", {borderBottom:"1px solid rgba(230,230,230,1)"},0); bg.to(".nav-link", {color:"rgba(0,0,0,1)"},0); bg.to(".icon-bar", {backgroundColor:"rgba(0,0,0,1)"},0); } // TRANSITION AND UPDATE function pageTransitionIn({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' } }); tl .set(loaderInner, { autoAlpha: 0 }) .fromTo(loader, { yPercent: 100 }, {yPercent: 0 }) .fromTo(loaderMask, { yPercent: -80 }, {yPercent: 0 }, 0) .fromTo(transitionText, {autoAlpha:0},{autoAlpha:1},0.25) .to(container, { y: -150}, 0); return tl; } function pageTransitionOut({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' }, // PROBABLY HERE IS THE PROBLEM onStart: () => { window.scrollTo(0, 0); initScript(); } }); tl .to(loader, { yPercent: -100 }) .to(loaderMask, { yPercent: 80 }, 0) .to(transitionText,{autoAlpha:0},0) .fromTo(".comparsa", {y: 100, opacity: 0,},{y: 0, opacity: 1, ease: "power4.out", duration: 3},0.5) .to(".text", { y: "0%", opacity: 1, duration: 2, ease: "power2.out"},0.5) .from(container, { y: 150}, 0); return tl; } // BARBA JS PART function initPageTransitions() { barba.init({ sync:true, /* debug: true, */ /* timeout:7000, */ transitions: [{ name: 'overlay-transition', once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initLoader(); }, async leave(data) { // animate loading screen in pageTransitionIn(data.current); await delay(1000); data.current.container.remove(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(tl => tl.kill()); scroll.destroy(); initSmoothScroll(data.next.container); await delay(1000); }, async enter(data) { // animate loading screen away pageTransitionOut(data.next); } }] }); } The integration of the 3 libraries I think I did it well, so I don't think the problem is with Barba or LS. It is as if there is a problem resetting the trigger. I hope that any solution to this problem will be of help to other people as well. Thanks in advance.