Scrolltrigger problem with barba js page transition

[Kitson Chan]

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!

[GreenSock]

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). 

[Kitson Chan]

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. 

[GreenSock]

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!