PAGE TRANSACTION

[janivibe]

Hi there, first of all, I don't know how to add multiple pages on CodePen, so I apologize for that. I'm currently learning Barba.js and trying to integrate GSAP into it after almost succeeding. However, I'm facing an issue where GSAP doesn't work after page transitions. Even I'm not sure about this matter. Also, my custom cursor isn't animating after page transitions, but it works fine if I reload the page. So I don't understand that whats going on there. Please guide me on this.?

See the Pen gOJXywZ by janivibe (@janivibe) on CodePen.

[Rodrigo]

Hi,

 

This most likely has to do with cleanup after the transition is completed. I would loook into Barba's API, most specifically hooks and lifecycle in order to know exactly where to remove all GSAP & ScrollTrigger instances after the leave animation of the current view are completed and when the enter animation of the new view is completed to create the GSAP & ScrollTrigger instances.

https://barba.js.org/docs/advanced/hooks/#Base-hooks

https://barba.js.org/docs/getstarted/lifecycle/

 

Unfortunately I don't have any experience with Barba. On the other hand @Ihatetomatoes created a series of videos that integrates GSAP into Barba's transitions, so I would recommend you to check it out:

 

Finally you could look into Stackblitz for creating a demo of your app so we can have a better look:

https://stackblitz.com

 

Hopefully this helps

Happy Tweening!