javascript - 在上一个补间完成后启动补间。 - Greensock/ScrollMagic

Question

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

http://codepen.io/anon/pen/HfFwJ

我使用的 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>

所以简而言之，我想为 slide-dos 设置动画，以便它在完成 top:300px 后添加 left:300px。

非常感谢任何帮助! :)

维度3NSION

Answer 1

虽然@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

有关更多信息，请参见此处:http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/