Jump to content
Search Community

PAGE TRANSACTION

janivibe test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...