时间戳

首页 > 解决方案 > 为什么 GSAP 在连续快速点击时冻结动画？

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

问题描述

例如，我在点击时运行动画，但是如果我点击了多次运行动画的按钮，但速度非常快，动画就冻结了。为什么会这样？

我的 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,
      });

标签： javascriptanimationgsap

解决方案

你犯了一个常见的 GSAP 错误。引用文章，

解决这个问题很简单：使用 .fromTo()。或者，您可以预先创建动画并使用控制方法。

我建议你阅读全文。

仅供参考，您更有可能在GreenSock 论坛上获得对此类问题的更快回复。

推荐阅读