如何制作从屏幕外部向右滑动 div 的 gsap 动画

Question

这是我第一次使用 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，我似乎不明白为什么它有一半时间有效，而另一半时间却没有。

Answer 1

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

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

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

另外请记住，您可以使用像 x: "100vw" 这样的视口单位，或者像 xPercent: 100

这样使用元素宽度的百分比

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

如何制作从屏幕外部向右滑动 div 的 gsap 动画

How can I make a gsap animation that slides div from outside of screen into the right

javascript

html

jquery

gsap