Javascript 在完成之前的吐温后开始吐温。-格林斯托克/魔术

尝试使用GreenSock/ScrollMagic JS在页面上设置div动画。我想在第一个tween完成后在我的动画框上触发第二个动画。所以把盒子向下移动300像素，然后向左移动300像素。我将如何添加一个tween序列。我的代码笔是-

我使用的JS是-

// init the controller
var controller = new ScrollMagic({
    globalSceneOptions: {
        triggerHook: "onLeave"
    }
});


// pinani
var pinani = new TimelineMax()

    // panel slide translateX
    .add(TweenMax.to("#slide-dos", 1, {top: "150px"})) // panel slide top
    .add(TweenMax.to("#slide-dos", 1, {left: "500px"})) // panel slide left
    .add(TweenMax.from( $('#slide-dos'), 0.5, {css:{scale:0.05, opacity:0, top: "100px"}, ease:Quad.easeInOut }));



// panel section pin
new ScrollScene({
        triggerElement: "section#pin",
        duration: 1100
    })
    .setTween(pinani)
    .setPin("section#pin")
    .addTo(controller);

我的HTML的结构-

<div class="row">
  <div class="large-12 columns"></div>
</div>

<section id="pin" class="scroll-magic-section">
  <div id="spacer">

    <div class="row">
      <div class="large-12 columns">
        <div id="slide-banner">
          <div class="container">
            <h3>Banner</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <div id="slide-pre">
          <div class="container">
            <h3>Pre-Animation</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <div id="slide-dos">
          <div class="container">
            <h3>Animation Box</h3>
          </div>
        </div>
      </div>
    </div>
</section>

横幅
预动画
动画盒

简单地说，我想制作幻灯片dos的动画，使其在完成顶部300px后添加left:300px

非常感谢您的帮助！：）

---

DIM3NSION

虽然@reekogi的答案是正确的，但它不必要地复杂。
如果您仍在使用时间线，只需创建如下序列：

var pinani = new TimelineMax()
    .add(TweenMax.to("#slide-dos", 1, {top: "300px"})) // panel slide top
    .add(TweenMax.to("#slide-dos", 1, {left: "300px"})); // panel slide left

---

有关更多信息，请参见此处：

Briliant，谢谢Jan。作为进一步的问题，我如何说在向下移动页面时将div的大小缩放到一半。因此，两个动画在同一时间。在看了文档之后，我一直在努力解决语法问题。Hi Jan一直在尝试解决这个问题，语法是否错误，因为它没有加载.add的最终动画（TweenMax.to（“#slide dos”，1，{top:“150px”}））//panel slide top.add（TweenMax.to（“#slide dos”，1，{left:“500px”}））//panel slide left.add（TweenMax.from（$（'#幻灯片dos'），0.5，{css:{scale:0.05，不透明度：0，顶部：“100px”}，ease:Quad.easeInOut}）；还以正确的格式编辑了问题Hi！这确实是一个GSAP问题。只需在最后一次添加调用中提供一个0作为第二个参数，即可将其添加到时间线的开头。如前所述，请务必阅读文档，这可能也会有所帮助：