为什么 GSAP 会在连续快速点击时冻结动画？

Question

比如我点击运行动画，但是如果我点击那个按钮运行动画多了一次，而且速度很快，动画在卡顿。为什么这可能？

我的 JS：

gsap.from(".tab-wrapper-item__box h3", {
        duration: 0.3,
        x: "-100%",
        opacity: 0,
        scale: 0,
        ease: "circ.out",
      });
      gsap.from(".tab-wrapper-item__box p", {
        duration: 0.5,
        x: "100%",
        opacity: 0,
        scale: 0,
        ease: "circ.out",
        delay: 0.5,
      });
      gsap.from(".tab-wrapper-item img", {
        duration: 0.3,
        y: "-100%",
        opacity: 0,
        scale: 0,
        delay: 0.3,
      });
      gsap.from(".tab-wrapper-item__box .btn", {
        duration: 0.5,
        y: "100%",
        opacity: 0,
        scale: 0,
        ease: "circ.out",
        delay: 0.9,
      });

Answer 1

您正在制作 common GSAP mistakes 之一。引用文章，

The fix for this is simple: use a .fromTo(). Alternatively you could create the animation beforehand and use a control method.

我建议您阅读整篇文章。

仅供参考，您更有可能在 the GreenSock forums.

上获得对此类问题的更快回复

为什么 GSAP 会在连续快速点击时冻结动画？

Why GSAP freeze animation on quick clicks in a row?

javascript

animation

gsap