Jump to content
Search Community

Animation control in Vue 3 does not play again after completion

jojko test
Moderator Tag

Recommended Posts

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

See the Pen BaJmRgO by jojk0 (@jojk0) on CodePen

Link to comment
Share on other sites

Welcome to the forums @jojko,

 

It works in Vue 2, so it must be a Vue 3 thing.

 

https://codesandbox.io/s/silly-snow-zsx9ek?file=/src/App.vue

 

The only thing I could get to work is to not use a ref for the tween and use functions for the controls. I would think it wouldn't have to be this complicated and should behave more like Vue 2, but maybe I'm missing something obvious.

 

See the Pen eYyeMmN by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...