0

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!

Jezza
  • 21
  • 2
  • So gsap and Barba working well, but other scripts do not work? – Greg-- Oct 04 '21 at 10:40
  • @Greg-- As far as I know, after the first transition Barba is the only thing left working. I immediately get a GSAP error in the console after a transition. None of my other scripts work. I've seen this problem mentioned a few times on here and on the gsap forums before with Barba. I'm thinking of switching to Swup if I can't find anything. – Jezza Oct 04 '21 at 12:18
  • you need to call your scripts (witch working with DOM) every time after you load another page because DOM tree was changed but scripts - not. In Swup will be the same thing – Greg-- Oct 04 '21 at 14:55
  • Barba and Swup its look like load content with AJAX, you need to wait till content is loaded and then call your scripts – Greg-- Oct 04 '21 at 14:58
  • I immediately get a GSAP error in the console after a transition >> What type of error did you get? – Greg-- Oct 04 '21 at 14:59
  • Please make a [minimal, complete, and verifiable example](https://stackoverflow.com/help/minimal-reproducible-example). – Zach Saucier Oct 04 '21 at 16:03
  • Sorry for my amateurness but what would be the best way to re-initialize my scripts again after all the content has been loaded? I also get a 'GSAP Target undefined error' in the console as well. This only happens though after the first transition because it all seems to be working fine on the first page. – Jezza Oct 04 '21 at 21:58
  • Try to recall script on enter(data) – Greg-- Oct 05 '21 at 12:27
  • [Answer](https://barba.js.org/docs/getstarted/custom-code/) on the official documentation page – Greg-- Oct 06 '21 at 12:28

1 Answers1

0

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/

https://greensock.com/forums/topic/24365-problem-with-killing-and-reinitialising-scrolltrigger-after-single-page-app-page-transition/

TL;DR, reinitialise your JavaScript on each page transition.

Blessed Zulu
  • 1