完成上一個補間後啓動補間。 - Greensock/ScrollMagic

嘗試使用GreenSock/ScrollMagic JS爲頁面上的div設置動畫效果。我想在第一個補間完成後在我的動畫盒上播放第二個動畫。所以把這個盒子向下移動300px，然後把它移到300px。我將如何去添加補間序列。我給這家codepen是 -完成上一個補間後啓動補間。 - Greensock/ScrollMagic

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，以便在完成其頂部：300px後添加left：300px。

任何幫助非常感謝！ :)

DIM3NSION

來源

2014-09-11 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

欲瞭解更多信息，請瀏覽：http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

來源

2014-09-11 17:44:53

燦爛，謝謝月作爲進一步的問題，我怎麼可能說規模該div也許只有一半的大小，同時向下移動頁面。所以2個動畫在同一時間。在查看文檔後，我正在努力學習語法 – DIM3NSION 2014-09-11 21:09:21

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（$（'＃slide-dos'），0.5，{css：{scale：0.05，opacity：0，top：「100px」}，ease：Quad.easeInOut}））; 還編輯了適當格式的問題 – DIM3NSION 2014-09-12 11:42:48

嗨！這真是一個GSAP問題。只需提供一個0作爲第二個參數與最後一個添加調用，以便它將被添加到時間線的開始。如前所述，一定要閱讀文檔，這可能也是有幫助的：http://greensock.com/jump-start-js – 2014-09-12 21:39:34

完成上一個補間後啓動補間。 - Greensock/ScrollMagic

回答

相關問題