我如何制作gsap动画，将div从屏幕外滑动到右侧

Question

这是我第一次使用gsap / greensock并使用动画，我试图转换某个DIV的X位置，以便它从右侧在屏幕上滑动。奇怪的是，使用相同的代码，一半的时间它会将正确的div从右侧滑入，而另一半的时间似乎是随机滑动，我认为这是左侧的区域，并且所有内容看起来都有问题。

这是我的代码：

<div class="TV">
  <h1">TV</h1>
</div>

  <script type="text/javascript">
        gsap.from('.TV', {duration: 1, x: 1400});
          gsap.to('.TV', {duration: 1, x: 0});
  </script>

很抱歉，如果这是一个愚蠢的问题，但是我第一次使用gsap，我似乎不明白为什么它有一半的时间有效，而另一半却没有。

Answer 1

这里的问题是，您有两个补间试图同时控制同一元素的相同属性。

要修复它，只需删除.to补间。

[另一种替代方法是使用.fromTo补间。

还请记住，您可以使用视口单位，例如x：“ 100vw”，也可以使用元素宽度的百分比，例如xPercent：100

我强烈建议您阅读GSAP的Getting Started article。