javascript - 前のトゥイーンの完了後にトゥイーンを開始します。- Greensock / ScrollMagic

Question

GreenSock / ScrollMagic JS を使用して、ページ上の div をアニメーション化しようとしています。最初のトゥイーンが完了した後、アニメーション ボックスで 2 番目のアニメーションを起動したいと考えています。ボックスを下に 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>

簡単に言えば、スライドドスをアニメーション化して、完了した後に left:300px を top:300px に追加したいと考えています。

どんな助けでも大歓迎です！:)

DIM3NSION