jojko
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by jojko
-
-
Hi,
I'm struggling with controlling animation in Vue 3. At the beginning everything is ok and I can freely control animation as usual. The problem starts when the animation completes. The behaviour of the controls is very odd. Sometimes it jumps to some specific time that I could not figure out why. Restarting, playing, disposing and creating a new tween from scratch does not solve the issue either.
Could it be an issue with Vue reactivity that doesn't update DOM?
I've made a minimal Vue component example with GSAP methods hooked into buttons for control.
EDIT: Just found out that it works properly with `.to()`, it's the `.fromTo()` that has this issue
EDIT 2: Looks like Vue doesn't render the animation after complete and only renders one "frame" from state at the time the button is clicked.
Clicking "restart" after completion plays the animation in GSAP's internal state but doesn't render it until it gets paused and then resumed. Once resumed, only one frame is rendered
Animation control in Vue 3 does not play again after completion
in GSAP
Posted
Vanilla version of this example is working properly so there might be something wrong with Vue:
See the Pen MWrOvev by jojk0 (@jojk0) on CodePen