William_bella

Amazing, Got it working !!! Thank you guys ? I've used Zack's code and akapowl method - Before rendering a new page KILL all ScrollTrigger and re-initialize again. ####People who's using Barba Js + ScrollTrigger You still need to add this piece of code to make it work - "data.current.contaier.remove();" barba.init({ sync: true, transitions: [ { async leave(data) { data.current.container.remove(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(t => t.kill()); }, async enter(data) { // animation function }, async once(data) { // animation function }, }, ], }); Whoever need it please check my codepen link. https://codepen.io/william_bella/project/editor/AxLLKq

Thank you for your reply. I mean the animation does work when it loads on the new page, but the problem I am having is that the ScrollTrigger function doesn't work on the new page. Before scrolling to the viewport, the animation already completed. If you check the codepen link - everything work fine on the about page (when you first load), and when you click on the resources link - The content already animated before scrolling to the viewport. I did try to kill and reset the timeline before rendering the page, but it didn't work. Thank you.

Hi, Can someone help please!!!! I am currently having an issue with Barba + GSAP on page transition. It work fine on the first page, when clicking on different link the scrollTrigger doesn't work... it load the animation before scrolling to the viewport. I've tried to Reset & Kill -> contentTl.kill(true) but it didn't work. Thank you. That's the link for codepen -> https://codepen.io/william_bella/project/editor/AxLLKq