Question

所以我试图使用TweenMax.staggerTo错开一些字母。

这是JS：

TweenMax.staggerTo(letter, 2, {bottom:0, opacity: 1, delay: 2}, 1);

HTML：

<div class="middle">
  <p class="letter">p</p>
  <p class="letter">p</p>
  <p class="letter">p</p>
  <p class="letter">p</p>
</div>

CSS：

.letter {
  display: inline;
  margin-right: 100px;
  opacity: 0;
  position: absolute;
}

.middle {
  text-align: center;
  padding-top: 100px;
  height: 100vh;
  margin: auto;
 }

我观看的其中一个官方教程解释说，动画元素上的位置需要具有绝对或固定的位置属性。

我很困惑，但是如何在不使它们彼此重叠的情况下为这些物体设置动画。这是我想要的一个例子：GSAP Staggered Animated Elements

谢谢！

Answer 1

我遇到了同样的问题，请考虑我也是初学者，staggerTo方法不适合这个例子。

让我们看一下GreenSock对staggerTo方法的官方定义：

Tweens an array of targets to a common set of destination values, but 
staggers their start times by a specified amount of time, creating an    
evenly-spaced sequence with a surprisingly small amount of code.

所以，如果我理解，最重要的是要记住它将一组目标补间到一个常用的目标值。这就是为什么你的字母与彼此重叠，具有相同的目的地值，这就是基本上使用staggerTo方法的原因。

我试图解决这个问题的原因是，由于我的所有元素都在一个数组中，我在javascript中使用了forEach（）方法，并在每个循环中递增索引。

以下是经过修改的codepen，请随时再次询问您是否未找到：CodePen Solution

基本上我刚刚做的就是做一个简单的时间线，并为每个字母添加一个方法。

希望它有所帮助！

快乐补间

Answer 2

以下是我所谈论的codepen

accountno|companyname|address1
1234|"Toys \"R\" Us"|"123 Main St."

使用GSAP交错方法时，无法保持元素不重叠

2 个答案: