GSAP staggerFrom負延遲

Question

問：

我想知道如果有一種方法來負延遲使用GreenSock添加到staggerFrom/staggerTo功能？

問題：

我有動畫的運行時間太長，我喜歡。如果以前的動畫正在播放以減少持續時間，那麼我的交錯動畫可能會發生。

例子：

我已經把這個codepen說明一下我後：http://codepen.io/nickspiel/pen/LpepvQ?editors=001

您可以在我使用的基本from時間軸功能的負面延遲codepen看到，但此對staggerForm函數不起作用，因爲延遲參數用於延遲jquery集合的每個元素。

Answer 1

我問在Greensock GitHub repo這個同樣的問題，有以下回應：

絕對 - 這已經在烘焙。我不知道，如果你正在使用 TweenMax或時間軸類中的一個，所以我會告訴你兩個：

TweenMax.staggerTo(elements, 1, {x:100, delay:2}, 0.01); 

// - OR - 

var tl = new TimelineLite(); 
tl.staggerTo(elements, 1, {x:100, delay:2}, 0.01); 

// - OR - 

var tl = new TimelineLite(); 
tl.staggerTo(elements, 1, {x:100}, 0.01, "label+=3"); 

在我的情況下，最後的選擇準確無誤地運行。

Answer 2

您是否嘗試過使用最新的v1.18.0 GSAP的推出了新的cycle財產？

這樣你就可以週期與delay但在staggerTo調用傳遞0爲stagger值。

另外，您可以將position參數傳遞給staggerTo調用，以使它們與先前插入的補間重疊。

Here是一個想法的分叉筆。

的JavaScript：

... 
animateElement = function() { 
     timeline.from(main, 0.3, { scaleY: '0%', ease: Back.easeOut.config(1.7) }) 
     .staggerFrom(dataBlocks, 0.3, { cycle: { delay: function(index) { 
      return index * 0.1; 
     }}, scale: '0%', y: 100, ease: Back.easeOut.config(1.7) }, 0) 
     .from(lineGraphLines, 1.5, { drawSVG: 0, ease: Power1.easeOut }, '-=0.5') 
     .from(lineGraphAreas, 1, { opacity: 0, ease: Back.easeOut.config(1.7) }, '-=2.0') 
     .staggerFrom(lineGraphDots, 0.2, { cycle: { delay: function(index) { 
      return index * 0.1; 
     }}, scale: 0, ease: Back.easeOut.config(1.7) }, 0, '-=1.0') 
     .staggerFrom(donutCharts, 0.6, { cycle: { delay: function(index) { 
      return index * 0.1; 
     }}, drawSVG: 0, ease: Power1.easeOut }, 0, '-=2.0') 
     .from(menuBackground, 0.3, { scaleX: '0%', ease: Back.easeOut.config(1.7) }, '-=6') 
     .staggerFrom(menuElements, 0.3, { cycle: { delay: function(index) { 
      return index * 0.1; 
     }}, scaleX: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1') 
     .from(headerBackground, 0.5, { scaleX: '0%', ease: Power1.easeOut }, '-=5.5') 
     .staggerFrom(headerBoxes, 0.3, { cycle: { delay: function(index) { 
      return index * 0.1; 
     }}, scale: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1.0') 
     .staggerFrom(headerText, 0.4, { cycle: { delay: function(index) { 
      return index * 0.1; 
     }}, scaleX: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1.0') 
     .from(headerText, 0.4, { scaleX: '0%', ease: Back.easeOut.config(1.7) }, '-=4'); 
    }; 
... 

這可能不是你想要的動畫完全類型，但是你需要調整在大部分position參數/所有的補間按照自己的喜好，但我認爲主要帶走你將是使用cycle與delay。

希望這有助於某種方式。

P.S.您可以傳遞負值stagger，但它們的含義不同。它告訴引擎從最後一個元素開始動畫動畫。