Как я могу сделать анимацию gsap, которая сдвигает div за пределы экрана вправо

Question

Это мой первый раз, когда я работаю с gsap / greensock и использую анимацию, я пытаюсь преобразовать позицию X определенного DIV, чтобы он скользил по экрану справа. Странно то, что с одним и тем же кодом половину времени он вставляет правильный 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 tween.

Другой альтернативой является использование промежуточного кадра .fromTo.

Также имейте в виду, что вы можете использовать единицы области просмотра, такие как x: "100vw", или использовать процент от ширины элемента, например xPercent: 100

Я настоятельно рекомендую пройти через GSAP Получение Начатая статья .