Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kitson Chan

Scrolltrigger problem with barba js page transition

Recommended Posts

Hi guys I am new to Greensock and recently I have created a template website using both gsap and barba js. The  full code can be found in https://github.com/kitsonchan/template_architecture and you can also view the website directly here https://kitsonchan.github.io/template_architecture/.

 

So now the problem that I have been struggling with is the timeline that was using scrolltrigger. In both of my page Ihave a timeline called tlStage1 and tlStage2. The tlStage1 works completely fine at all conditions but I don't know why tlStage2 only works when you refresh the page. I am not sure if the issue is related to barba js lol so i decide to ask here. Thanks!

Link to comment
Share on other sites

I don't have time to look through all your code (in the future, please just post a minimal demo, not your whole site) but my guess is that your 2nd one is relying on elements/assets that haven't fully loaded or something like that. I'm not familiar with Barba.js but you probably need to wait for some kind of lifecycle event that basically says "okay, I'm done altering the layout of the page." and then you can call ScrollTrigger.refresh() which forces ScrollTrigger to update all its start/end values on the page. Also don't forget to kill() any ScrollTriggers when you leave a page (assuming it's a single page application). 

  • Like 2
Link to comment
Share on other sites

So it seems that I need to reinitailize and kill scrolltriggers when entering and leaving every single page. Thanks for your advice and I will make sure I will include a demo codepen next time :).

 

Btw is it possible to do page transition with only gsap? I dont know if there is any way to do so wothout using some kind of library. 

Link to comment
Share on other sites

10 hours ago, Kitson Chan said:

Btw is it possible to do page transition with only gsap? I dont know if there is any way to do so wothout using some kind of library. 

GSAP can literally animate any property of any object that JavaScript can touch. So yes, you can do page transitions with purely GSAP. However, GSAP is built to be super-flexible and robust - it's NOT a page transition library with canned effects or anything like that. You'd have to write the JavaScript to transition things the way you want. 

 

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.

×