如何制作将 div 从屏幕外部滑入右侧的 gsap 动画答案

【问题标题】：How can I make a gsap animation that slides div from outside of screen into the right如何制作将 div 从屏幕外部滑入右侧的 gsap 动画
【发布时间】：2020-05-08 10:33:39
【问题描述】：

这是我第一次使用 gsap / greensock 并使用动画。我正在尝试转换某个 DIV 的 X 位置，使其从右侧滑入屏幕。奇怪的是，使用相同的代码，一半时间它从右侧滑入正确的 div，但另一半时间它似乎随机滑动，我认为这是从左侧开始的部分，一切看起来都有问题。

这是我的代码：

<section class="homepage">

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

 </section>

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

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

【问题讨论】：

标签： javascript html jquery gsap

【解决方案1】：

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

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

另一种选择是使用 .fromTo 补间。

另外请记住，您可以使用视口单位，例如 x: "100vw" 或使用元素宽度的百分比，例如 xPercent: 100

我强烈建议通过 GSAP 的Getting Started article。

【讨论】：