javascript - TweenMax - 如何以不同的速度为元素设置动画？

Question

我是 TweenMax.js 的新手，我正在尝试为元素的不透明度和位置设置动画。我想让元素在 0.5 秒内出现，而元素的水平移动应该在 2 秒内完成。

这是我迄今为止所完成的。

var tl = new TimelineMax(); 
tl.to('.elem', 2,{autoAlpha:1,x:0,ease:Power4.easeInOut});

我试过这段代码，但水平移动动画只在不透明度动画之后开始

var tl = new TimelineMax();
tl.to('.elem', 2, {x:0,ease:Power4.easeInOut})
.to('.elem', 0.5, {autoAlpha:1});

How can I get my element animated at different speeds by modifying the existing code?

var tl = new TimelineMax();
var e = document.querySelectorAll('.text');
e.forEach(function(elem) {
  elem.innerHTML = elem.innerHTML.replace(/\S/g, '<span class="elem">$&</span>');
})
tl.to('.elem', 3, {
  autoAlpha: 1,
  x: 0,
  ease: Power4.easeInOut
});

span {
  display: inline-block;
  font-size: 30px;
  opacity: 0;
}

span:nth-child(1) {
  transform: translateX(-15px);
}

span:nth-child(2) {
  transform: translateX(-10px);
}

span:nth-child(3) {
  transform: translateX(-5px);
}

span:nth-last-child(3) {
  transform: translateX(5px);
}

span:nth-last-child(2) {
  transform: translateX(10px);
}

span:nth-last-child(1) {
  transform: translateX(15px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="text">Hello World</div>

Answer 1

经过几个小时的搜索，我终于找到了解决方案。
https://greensock.com/forums/topic/10133-how-can-i-run-multiple-tweens-in-parallel-in-a-timeline/

To have tweens run in parallel you need to insert them at the samepoint in time in the timeline.

Where a tween is inserted into a timeline is controlled via theposition parameter. In my example, I can have the second tween startat the same time as the first tween by adding it at a time of 0 likethis

 tl.to('.elem', 2,{autoAlpha:1,ease:Power4.easeInOut})
 .to('.elem', 4, {x:0,ease:Power2.easeIn}, 0)

CODEPEN