Refresh GSAP ScrollTrigger after Barba transition - gsap

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