ScrollTrigger().refresh with barba.js

[AdventurousDeveloper 19 Likes (Newbie)]

Hey everyone!

 

I'm hoping this is considered a GSAP question rather than a Barba.js one. I've looked through this forum posts related to scrollTrigger and barba, which from I understand that scrollTriggers need to be killed off during barba transition then reinitiated after page transition.

 

My environment is in WordPress and I'm getting no errors transitioning between pages. I've tried to simplify down what I'm using, so I hope this would be enough to troubleshoot... The below works, killing off all ScrollTriggers and then running "scrollFunction()".

 

const cleanGSAP = () => {
	ScrollTrigger.getAll().forEach( t => t.kill(false) )
	ScrollTrigger.refresh()
	window.dispatchEvent(new Event("resize"))
}

function delay(ms) {
	return new Promise( resolve => setTimeout(resolve, ms) )
}

barba.init({
	sync: true,
	transitions: [
		{
			async leave(data) {
				
				const leaveDone = this.async()
				await delay(1000)
				leaveDone()	
				
			},
			async afterLeave(data) {
				
				cleanGSAP()
				
			},
			async beforeEnter(data) {
				
			},
			async enter(data) {
				
				$(window).scrollTop(0)
				
			},
			async afterEnter(data) {
				
			},
			async after(data) {
				
				//scrollFunction() this works 
				//ScrollTrigger().refresh() this doesn't work

			}
		}
	]
})

function scrollFunction() {
	//gsap stuff here
}

 

My issue is the "scrollFunction()" is declared in another file and can't be moved to the file with the barba.js hooks. Replacing "scrollFunction()" with ScrollTrigger().refresh()  in the after hook doesn't work or is this not how it's meant to be used? If not is there a global function that can innit all scrollTriggers?

 

I'd appreciate and tips or help on this 😀

 

Cheers

[OSUblake 18,477 Likes (Superhero)]

Hi tractaNZ,

 

I'm a little unclear about what you're asking here. This really isn't the best place to ask about barba's API, but I would assume that if you transitioned to a new page, then you would need to create your ScrollTriggers again. It's whole a new set elements, so even if your previous ScrollTrigger instances were stored in memory, refreshing isn't going to do anything as those elements don't exist anymore.

 

And you don't need to include a function inside the same file to call it. Assuming you didn't nest scrollFunction inside another function, it should be global. If not, you can always make it global.

 

window.foo = () => {
  console.log("hello");
};


// in another file
foo(); // hello

// or
window.foo();

 

 

[AdventurousDeveloper 19 Likes (Newbie)]

15 hours ago, OSUblake said:

need to create your ScrollTriggers again. It's whole a new set elements, so even if your previous ScrollTrigger instances were stored in memory, refreshing isn't going to do anything as those elements don't exist anymore.

 

Hey @OSUblake, thanks for taking the time to have a look at this. What you said above totally makes sense and what I couldn't figure out. Cheers!