ScrollTrigger offset after moving to the next page (with Barba.js and LocomotiveScroll)

[nicolatrabace]

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.

[ZachSaucier]

Hey nicolatrabace and welcome to the GreenSock forums. It's pretty hard for us to help figure out the specific issue given only the code that you've provided and without a minimal demo.

 

Some guesses: Make sure you're killing off the old ScrollTriggers when the page transition happens. Also make sure that all relevant values are reset (if there are any). Also make sure that the page is exactly as it will be at the end before initializing your new ScrollTriggers (or make sure that you call ScrollTrigger.refresh() at the end).

 

If those don't help, I highly encourage you to keep cutting things out of your project until you get to an absolute base case of the issue. Most likely if you do that you'll find the issue  If you figure it out please let us know.

 

Nice work on the website! I'd love to see the final thing.

[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.

[ZachSaucier]

On 11/14/2020 at 6:45 PM, nicolatrabace said:

with a lot of patience, I followed your advice and tried to find the "catch".

Good work!