Jump to content
Search Community

ScrollTrigger().refresh with barba.js

AdventurousDeveloper test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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();

 

 

  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
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.
×
×
  • Create New...