GSAP VueJS -> Not resetting?

[ms1987]

Dear all,

 

I have a VueJS SPA project that contains a very simple animation

let timeLine = gsap.timeline({defaults: {ease:"circ.in", duration: 1.5,}, onComplete: () => { router.push({ name: "Question1" });}});
timeLine.fromTo(".start-container, .start-footer", {opacity: 1}, {opacity: 0});

This works perfectly fine, it fades out the mentioned elements and moves to the next "page".

On the other pages in my app, i have a router push back to the page that contains the code above.
The code above is sitting in a method that is being called after a click.

 

When i navigate back to this page, then the elements that have faded out upon my initial visit, are not reset. They are still in opacity: 0.

I have tried the timeLine.kill() function, but to no avail.

 

I have also checked, VueJS does remount the component, so therefore i believe it must have something to do with GSAP.

 

Any help or suggestion would be greatly appreciated.

 

Ps: I am using Vue3, VueRouter and GSAP.

 

Kind regards

[OSUblake]

Hi @ms1987 

 

I don't see how that could be a gsap issue, but it's hard to tell from the code provided. If you could make a simplified demo on codesandbox, it would be easier to troubleshoot.

 

[Rodrigo]

Have you tried using the <transition> component to create animations between routes? Since vue router is made by the vue core team it's super simple to create transitions between routes using the javascript hooks the API exposes:

 

https://codesandbox.io/s/gsap-vue3-route-transitions-f5y4e

 

Also what you can try this to clear the applied styles by GSAP in the beforeDestroy hook in your component:

gsap.set(".start-container, .start-footer", { clearProps: "oapcity" });

Here you can read about clearProps (scroll almost to the end of the page):

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

Happy Tweening!!!