I am using Barba.js and GSAP to create page transitions for my website. After watching a few tutorials and fiddling around a bit, I managed to create a slide-transition between two pages. Thing is I've also got other javascript content which is for other functionality elements on each page. On the first page load, everything seems to work fine.
I then click on a link to transition to the next page, the transition goes well but suddenly none of the elements I had coded in the very same JS file work anymore.
I can still transition perfectly between each page but none of the other JS content seems to be working. I'm not getting any errors in the console so I have no idea what's exactly happening here.
Here's what my Barba initialization looks like.
barba.init({
sync: true,
transitions: [{
async leave(data) {
const done = this.async();
animationLeave();
await delay(1000);
done();
},
enter(data) {
animationEnter();
},
once(data) {
animationEnter();
}
}, {
name: 'home-transition',
to: {
namespace: ['home']
},
async once(data) {
homeAnimation();
}
}]
});
The AnimationEnter, AnimationLeave and HomeAnimation methods just link to GSAP animations. For example here's what the AnimationLeave one looks like:
function animationLeave() {
var tl = gsap.timeline();
tl.to('.loading-screen', {
duration: 1,
width: '100%',
left: '0%',
ease: 'expo.easeInOut'
});
tl.to('.loading-screen', {
duration: .8,
width: '100%',
left: '100%',
ease: 'expo.easeInOut',
delay: .3
});
tl.set('.loading-screen', {
left: '-100%',
width: '0%'
});
}
Any help is appreciated!
I flipped the internet upside down looking for a solution to this very problem just a few weeks ago.
Essentially, all your JavaScript runs only once on the initial page load when you're working with BarbaJS. It doesn't get reinitialised once you transition from one page to another. This means that when you transition to another page, all JavaScript-powered animations on that new page won't work unless those animated elements existed on the first page loaded when the site is visited.
To get page-specific animations to work from one page to another after a transition, all of those animations have to be reinitialised. You can do this using global Barba hooks:
barba.hooks.beforeEnter(() => {
killEvents();
});
This code will run before the next page is shown between transitions. If you're using something like ScrollTrigger or an instance of a smooth scrolling library, you can kill those instances or else they'll just stick around and be a memory hog. If you're not, then there's no need to remove any events.
barba.hooks.afterEnter(() => {
addEvents();
});
This is the important part. After a transition, you can then re-add your animation events as shown here.
Another really important thing that helped me was initialising your DOM nodes inside the functions that returned or created your animations. If you simply initialise the DOM nodes once on the initial page load and not on each transition, your animation code will assume you're only animating the elements on the initial page even when the page has transitioned to another.
Some Greensock forum posts that helped:
https://greensock.com/forums/topic/26585-scrolltrigger-not-working-after-barba-transition/
TL;DR, reinitialise your JavaScript on each page transition.