Evan S

hi @federico.pian I was working on a Nuxt3 project and I had similar questions of how to create seamless page transitions following at the same time good practices for both Nuxt and the GSAP library itself. I had to experiment a lot to find the best approach. I'm not sure if this answers your question but something you can try is this. Take advantage of the "gsap.context" and create a local scope of either your pages or even individual Vue components. This will make it easier to reference it later and do an easy clean up. Example: <script setup> import { gsap } from 'gsap'; const main = ref(); let ctx; ctx = gsap.context((self) => { gsap.to('.my-element', { alpha: 1, }); // ... rest of GSAP magic here }, main.value); // <- Scope! onUnmounted(() => { ctx.revert(); // <- Easy Cleanup! }); </script> I'm using the Vue unmounted hook to revert everything, like @Rodrigo mentioned this is the hook that comes last in Vue for a component lifecycle. This will clean up your animations and eventually optimize performance as well. You can play around this idea and find the best fit for your case. I hope this small input helps you and others with similar question. Best

Thanks for the reply and the links. I'll definately read these articles. I'm using HTML5 history and everything is triggered when the URL changes. I've made everything to work but there is a part that I don't like. I think my solution is a little bit dirty. I'm not very experienced I'm not using the ajax beforeSend anymore. I couldn't find a way to wait for the animations to finish and then load the new content. So instead I have an outro sequence, Then I load with ajax the new elements, I hide the new content (this is what I don't like) Reveal everything (intro sequence) My code so far: $window.bind('statechange',function(){ sequenceOut(); function sequenceOut(){ tl.to("#main", 1, {scaleY:"0", ease:Power4.easeInOut}); tl.to("#bg-img", 1, {opacity:"0", ease:Power4.easeInOut}, "-=1.0"); tl.call(loadPage); } function sequenceIn(){ // hide specific elements when new page loads tl.to("#bg-img", 0, {opacity:"0"}); tl.to("#main", 0, {scaleY:"0"}); // reveal elements sequentially tl.to("#bg-img", 1, {opacity:"1", ease:Power4.easeInOut}); tl.to("#main", 0.8, {scaleY:"1", ease:Power4.easeInOut}, "-=0.8"); } function loadPage(){ // ajax loads and callbacks here success: calls the sequenceIn function } }); The part that I don't like is that I have to hide some elements by default after the ajax load and then reveal them again with timeline animations. Any suggestions would be very welcome. Thanks again.

I'm using ajax to load data within a specific div and I have some animations in the ajax's beforeSend event but they cannot complete as the ajax success event loads the next data in the div. Is there any way to wait for the animations to finish on beforeSend and then load the new data? My scenario is: navigation changes (click event) current data in page has outro animations loading spinner appears after new page finishes loading new data in the page appears with intro animations Almost everything is working but the new page loads before the outro animation finishes. Any tips would be very helpfull. thanks