stagger:
利用複數選擇器的群組，將各別元素動畫設定有序的 delay
Stagger: 簡單來說就是 delay 的指揮官
看範例:
gsap.to('.block', { // 群選
scale: 0.5,
stagger: 0.1
});✽補充 gsap 的選擇器
Selector: Doc
gsap.to(選擇器, 設定)選擇器能接受的格式：
字串：query 選擇器能篩出的 <HTMLElement> 或 <NodeList> 的字串
物件：自訂的物件、<HTMLElement> 或是任何其他框架的物件
陣列：包有物件的陣列，或 <NodeList>
當字串選擇器選擇到多個 HTML元素後
會被轉為陣列，對陣列內每個元素都進行操作
實用複選 :
gsap.utils.toArray('.className') // return [HtmlElement, ...]
// NodeList[...] -> Array[...]✽補充 vars 針對選擇器陣列的處理方式
如同上面範例的選擇器(.block)，會篩選出所有此 class 的元素
第一章有提到，在動畫設定值中，可以有各種設定類別(String, Number…)
Function-based values:
其中可以把 function 作為設定值
function 能接收三個參數 (index, item, list): [回傳設定值]
ex.
gsap.to('p', {
// Const: translateX(1px)
x(index, item, list) {
return 1
}, // Linear: index 越大，translateY 越多
y(index, item, list) {
return index
}
})
index: 陣列當中的順序(0)
item: 當下的物件
list: 選擇器轉出的陣列
由於參數存在差異，因此可以透過一個 Tween 就產生多個不同設定的動畫
Stagger選擇器陣列設定 delay
stagger 設定是將 delay 做模組化的運用
可以接受三種設定類
根據類型會得到不同結果
Number: 依序各個元素動畫要 delay 幾秒 (簡易)
Function: 跟 delay 設定 function 一樣 (困難)
Object: 提供幾個已經幫你算好的設定可以直接套用 (多元)
以下是Object介紹:
gsap.to('.block', {
scale:0.5,
stagger: { // delay的總長
// 去分配每個元素的delay
amount: 1,
// 每個元素之間的delay
// 與amount擇一
each: 0.1,
// 假設圖形的起始點
// (Int)從第幾個開始
// 前後延伸順序設定
ex.設定2: 2 > [1,3] > [0,4]...
// (String)有定義grid時
// "start", "center", "edges", "random", or "end"
from: "center",
// 假設圖形的形狀 (Array [rows, cols] 或 String "auto")
grid: "auto",
// 分配機制，可參考第四篇ease
// 預設'none'，平均分配(等速）
ease: "power2.inOut",
// 如果有定義grid
// 可以選擇方向垂直還水平
// 'x' | 'y'
axis: 'x'
}
})
GSAP系列結語：
入門想說是給一些
想快速使用、對 js 還沒這麼熟悉的人使用
但不知不覺某些內容還是寫得有點太艱深了
如果內容不錯的話
可以在下方留言或找我聊天
再考慮要不要製作更實用更難的文章或課程
前端特效動畫 GSAP 教學 [入門01][大綱]
前端特效動畫 GSAP 教學[入門02] [流程]
前端特效動畫 GSAP 教學[入門03][播放]
前端特效動畫 GSAP 教學 [入門04][ease]
前端特效動畫 GSAP 教學[入門05][交錯]
