Refresh GSAP ScrollTrigger after Barba transition

Question

I'm unable to get ScrollTrigger working after a page transition.

I'm using the views data within the barbs.init.

/*PAGE TRANSITION*/
barba.init({
    transitions: [{
        name: 'opacity-transition',
        leave(data) {
            return gsap.to(data.current.container, {
                duration: 0.5,
                opacity: 0,
                y: '50px',
            });
        },

        enter(data) {
            gsap.from(data.next.container, {
                duration: 0.5,
                opacity: 0,
                x:'-50px',
            });
        }
    }],
    views: [{
        namespace: 'tester',
        beforeLeave(data) {
            //alert('Leaving tester');
        },
        beforeEnter(data) {
            //alert('Entering tester');
        },
        afterEnter(data) {
            //alert('Entered tester');
            ScrollTrigger.refresh();
        }
    }]
});

Most other code fires OK. However I cannot get gsap scroll trigger to work after a page transition. (Have the same issue with locomotive.js)

Can someone please advise what I might be doing wrong.

I'm new to Barba and ScrollTrigger, and have limited JS experience so an explicit answer would be very welcome.

Answer 1

You needed to add the ScrollTrigger.refresh(); to trigger when the animation ends, not the new page entered. You can do that using the onComplete property in your GSAP tween, as follow:

// ADD onComplete

enter(data) {
 gsap.from(data.next.container, {
    duration: 0.5,
    opacity: 0,
    x:'-50px',
    onComplete: () =>{
       ScrollTrigger.refresh(true)
    }

And you can delete this in your Barba.js view

// DELETE THIS

 afterEnter(data) {
     //alert('Entered tester');
     ScrollTrigger.refresh();
}