Cannot execute collapse effect with dropdown menu when I add reverse function

[JDK]

I'm using Vite + Vue to play with GSAP, I want to create a dropdown menu sidebar but I'm stucking at doing reverse animation to make the dropdown collapse. I tried to use this line blow and when I added the animation can not be triggered. How should I do for this situation?

 

tl.reversed() ? tl.play() : tl.reverse();

Here is my code on StackBlitz:

https://stackblitz.com/edit/vitejs-vite-jptdfr?file=src%2FApp.vue&terminal=dev

[Dentsu Creative CZ]

I dont think this is realated to the GSAP.

You need to properly setup your timeline - only once in `mounted` method.

You need to manage app state by Vue, not by gsap. So at the end you will have something like this

      if (this.isMenuOpen) {
        tlMenu.reverse();
      } else {
        tlMenu.play();
      }