Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
William_bella

ScrollTrigger not working on Single Page App page transition

Recommended Posts

Hi,

 

Can someone help please!!!!

 

I am currently having an issue with Barba + GSAP on page transition. It work fine on the first page, when clicking on different link the scrollTrigger doesn't work... it load the animation before scrolling to the viewport.

 

I've tried to Reset & Kill -> contentTl.kill(true) but it didn't work. Thank you. 

 

 

That's the link for codepen -> https://codepen.io/william_bella/project/editor/AxLLKq

See the Pen AxLLKq by william_bella (@william_bella) on CodePen

Link to comment
Share on other sites

Hey William and welcome to the GreenSock forums.

 

Every time that you load a new page it adds more tweens to the same timeline. But if that timeline has already completed then it won't replay unless you tell it to .play() (or .restart() or whatever). That's actually one of the most common GSAP mistakes:

 To fix it, you could kill the timeline then recreate it or use a new one every time. 

  • Like 1
Link to comment
Share on other sites

Thank you for your reply. 

 

I mean the animation does work when it loads on the new page, but the problem I am having is that the ScrollTrigger function doesn't work on the new page. Before scrolling to the viewport, the animation already completed. 

 

If you check the codepen link - everything work fine on the about page (when you first load), and when you click on the resources link - The content already animated before scrolling to the viewport. I did try to kill and reset the timeline before rendering the page, but it didn't work. Thank you. 

Link to comment
Share on other sites

 

Well, I guess that is very well more related to the way barba works, than it is a GSAP issue.

 

You have to kill the 'old' ScrollTriggers on page transition and re-initialize them fresh on entering the new page.

What worked for me was this nifty piece of code I grasped from Jack or Zach once (don't know which one of you it was)

 

		let triggers = ScrollTrigger.getAll();
		triggers.forEach( trigger => {			
			trigger.kill();
		});

 

You will have to find the right barba-hooks for your project to kill the 'old' ScrollTriggers and re-initialize the 'new', though.

 

Hope this helps a bit.

 

Cheers,

Paul

  • Like 3
Link to comment
Share on other sites

And here's the one-liner version of that:

ScrollTrigger.getAll().forEach(t => t.kill());

:)

 

  • Like 4
Link to comment
Share on other sites

Amazing, Got it working !!! Thank you guys 😁

 

I've used Zack's code and akapowl method -  Before rendering a new page KILL all ScrollTrigger and re-initialize again.

 

####People who's using Barba Js + ScrollTrigger

 

You still need to add this piece of code to make it work - "data.current.contaier.remove();"

 

barba.init({
	sync: true,

	transitions: [
		{
			async leave(data) {
				data.current.container.remove();
			},

			async beforeEnter(data) {
				ScrollTrigger.getAll().forEach(t => t.kill());
			},

			async enter(data) {	
				// animation function
			},

			async once(data) {
				// animation function
			},
		},
	],
});

 

Whoever need it please check my codepen link. https://codepen.io/william_bella/project/editor/AxLLKq

 

  • Like 3
Link to comment
Share on other sites

Good to hear you got it working :)

 

And yes. The part with

 

data.current.container.remove();

 

is another barba-related thing that needs to be done in certain scenarios like yours, because there is a timespan when both - the new and the old barba-container - are in the DOM at the same time.

 

So you need to make sure the old stuff is gotten rid of before ScrollTrigger is being applied, so it does its' magic to the right portion of the code.

 

Again, that is not really related to GSAP per se - just to clear things up for future readers.

 

 

 

On a side note: I love, how you melted Zach and Jack into one person named Zack :D

 

  • Like 1
  • Haha 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×