이전 트윈 완료 후 트윈 시작. - Greensock/ScrollMagic

Question

GreenSock/ScrollMagic JS를 사용하여 페이지의 div를 애니메이션으로 만들려고합니다. 첫 번째 트윈이 완료된 후 애니메이션 상자에서 두 번째 애니메이션을 실행하고 싶습니다. 300px 아래로 상자를 이동 한 다음 300px 왼쪽으로 이동하십시오. 트위닝 시퀀스를 어떻게 추가할까요? 이에 대한 나의 codepen입니다 -

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> 

슬라이드 - 도스가 추가되어 좌측 상단에 300px의 상단이 완성 된 후 300px가됩니다.

도움을 주시면 큰 도움이됩니다. :)

DIM3NSION

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/이