SplitText deletes text after page transition

[Vander]

Hi there!

 

I'm using astro + https://vuejs.org/ components and swup.js for page transitions. I'm also using GSAP for animations
I've found a problem while navigating. On first load, text in "TransformAnimation.vue" prints with animation and everything looks and works cool. If I then go to some other page (About, blog..) the text disappears even though js runs and works correctly

I thought it was because of swup, but I've seen that if I comment/delete the SplitText GSAP part, the text always appear... I don't get why my GSAP code is deleting the text? :/ 

I leave a minimal demo(thanks @GreenSock):

https://stackblitz.com/edit/testing-astro-swup-vue?file=src%2Flayouts%2FLayout.astro,src%2Fpages%2Findex.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Fblog%2Findex.astro,src%2Fcomponents%2FTransformAnimation.vue,src%2Fcomponents%2FHeader.astro 

Thanks!
 

[Rodrigo]

Hi,

 

I don't have any experience with Astro and SWUP so I can't really help you with that, sorry.

 

We do have an example using just GSAP for page transitions in a Vue3 app:

https://stackblitz.com/edit/vitejs-vite-w8wtpj

 

Be sure to use GSAP Context in your app, use life-cycle hooks (mounted, unmounted) to create and revert your GSAP instances (SplitText, ScrollTrigger, etc.)

 

Also you might want to check this thread (and the one mentioned there as well) and see how other users solved issues related with SWUP:

My best guess is that the SWUP transition is interfering with the whole process. You should wait for the SWUP transition to be completed and only then, run your GSAP code.

 

Sorry I can't be of more assistance but with my lack of experience and SWUP not being a GSAP related product there is not much we can do.

 

Hopefully this helps.

Happy Tweening!

[Vander]

On 5/19/2023 at 7:57 PM, Rodrigo said:

Hi,

 

I don't have any experience with Astro and SWUP so I can't really help you with that, sorry.

 

We do have an example using just GSAP for page transitions in a Vue3 app:

https://stackblitz.com/edit/vitejs-vite-w8wtpj

 

Be sure to use GSAP Context in your app, use life-cycle hooks (mounted, unmounted) to create and revert your GSAP instances (SplitText, ScrollTrigger, etc.)

 

Also you might want to check this thread (and the one mentioned there as well) and see how other users solved issues related with SWUP:

My best guess is that the SWUP transition is interfering with the whole process. You should wait for the SWUP transition to be completed and only then, run your GSAP code.

 

Sorry I can't be of more assistance but with my lack of experience and SWUP not being a GSAP related product there is not much we can do.

 

Hopefully this helps.

Happy Tweening!

Thanks for your response. 

As you can see in the console, this component's console's log are running after the page transition (swup). I think this is correct.

I'm also trying to revert() the splittext to the original state on unmount the component and beforeUnmount, just in case, but the component is still without text after page transitioning... ?

 

Does anybody know what could I try?  

Many thanks

[Rodrigo]

Hi,

 

The only thing I can think of is that there is some sync problems between Vue life-cycle hooks and SWUP. A lot of people (myself included) have used GSAP with Vue/Nuxt in production without any issues, so the cause of your issue has to be something else and the only suspect I have is SWUP.

 

You could check the order of execution between SWUP own hooks and Vue's life-cycle methods, maybe SWUP's are called after Vue's and that's causing this problem. Also keep in mind that you're using a SSR setup which, IMHO shouldn't cause this setup to behave differently, but again I have no experience with Astro so I couldn't tell.

 

Unfortunately I can't think of a single reason for the text not being there, also the console is not showing any GSAP related errors so the DOM elements GSAP is using are there and the plugin is installed and registered as expected.

 

Sorry I can't be of more assistance, but hopefully this helps in some way.

Happy Tweening!