greensock / GSAP

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
https://gsap.com
19.56k stars 1.72k forks source link

My animation won't start in some cases #463

Closed ben-lau closed 3 years ago

ben-lau commented 3 years ago

Hello, I have a ludo game project with pixi.js, and I use TweenLite to control my animation, and I use Promise.all to return an animate completion status, just like this: image But in some cases, I found my promise is not fulfilled, so I try to log in onStart and onComplete, and neither the complete won't fire, nor the start. image I cant locate the inevitable situation, case it's look like it appears randomly.

FYI, the version of my gsap is 3.7.0

OSUblake commented 3 years ago

TweenLite is deprecated. Check out the migration guide.

It's hard to debug based on a snippet of code. Are you're overwriting the animations, like maybe calling jumpTo too quickly, or animating the scale in another method?

That said, I would probably try this. There's no need to use Promise.all.

jumpTo({ x, y }) {
  const initialScale = this.scale;
  return gsap.timeline()
    .to(this, {
      x, y,
      duration: 0.3,
      ease: "none"
    })
    .to(this.scale, {
      duration: 0.1,
      yoyo: true,
      repeat: 1,
      ease: "none",
      x: initialScale.x * 1.2,
      y: initialScale.y * 1.2,
    }, 0.1);
}
ben-lau commented 3 years ago

I haven't overwriting any animations, and my project is a ludo game, jumpTo is the method of my chess view, i called jumpTo when the previous jumpTo is done: image

I found this problem when I resized my window quickly, so I know it's hard to locate the problem, but I also issued this to see if I can remind you of anything.

By the way, I solved this problem with using your suggestion, thanks. Is there any different from timeline and tween?

OSUblake commented 3 years ago

Is there any different from timeline and tween?

A timeline is a container for tweens, so it's helpful if you want to group and sequence animations.

ben-lau commented 3 years ago

ok, here is another question, I found animation will paused when my window is in the background, therefore my move task will pause because of promise pending status. I use Promise.race to this animation and a promise of setTimeout to solve it, Is there anyother solution?

OSUblake commented 3 years ago

Do you mean like when you change tabs? Have you seen this helper function. https://greensock.com/docs/v3/HelperFunctions#hidden

ben-lau commented 3 years ago

oh, all right then, that helps, thank you so much