Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
使用 GSAP 的 stagger 建立交錯效果
在上次的公司網站改版中，替公司的首頁與招募頁添加預載動畫時，使用時間軸的方式來製作轉場的交錯效果，但為了製作這個效果，必須要另外計算時間差，做起來並不直觀：
//Adapted from https://codepen.io/ahsanrathore/pen/MwppEB
var height = 100, // height of a progress bar in percentage
perfData = window.performance.timing, // The PerformanceTiming interface
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart), // Calculated Estimated Time of Page Load which returns negative value.
time = parseInt((EstimatedTime/1000)%60)*100; //Converting EstimatedTime from miliseconds to seconds.
$("#mask").animate({
height: 100-height+"%",
}, time);
var tl = new TimelineMax();
setTimeout(function(){
// gasp.to("#bar1", );
tl.to("#logo_preload", {duration: 0.3,opacity:0})
.to("#bars", {duration:0.3,opacity:1}, "-=0.2")
.to("#bar1", {duration:0.3,width:0}, "-=0.1")
.to("#bar2", {duration:0.3,width:0}, "-=0.1")
.to("#bar3", {duration:0.3,width:0}, "-=0.1")
.to("#bar4", {duration:0.3,width:0}, "-=0.1")
.to("#bar5", {duration:0.3,width:0}, "-=0.1")
.to("#preload", {duration: 0.3, height:0});
},time);
See the Pen Preload with GSAP by Eric Chuang (@eric-chuang) on CodePen.
GSAP 的 stagger 交錯效果
在 GSAP 中，stagger 屬性便能製作出交錯的效果，其基本語法如下：
gsap.from( 選擇器, {
duration: 時間長度,
樣式屬性: '屬性值',
stagger: 交錯時間間隔,
} );
gsap.to( 選擇器, {
duration: 時間長度,
樣式屬性: '屬性值',
stagger: 交錯時間間隔,
} );所以可以將上面的程式碼簡化為以下寫法，也能達到一樣的效果：
const tl = gsap.timeline(),
bars = document.getElementsByClassName( 'bar' );
tl.to("#logo_preload", {duration: 0.3, opacity: 0 } )
.to("#bars", { duration: 0.3, opacity: 1 }, "-=0.2")
.to( bars, { duration: 1, width: 0, stagger: 0.2 } )
.to("#preload", { duration: 0.3, height: 0 } );See the Pen GSAP Staggering by Eric Chuang (@eric-chuang) on CodePen.
結語
為了這次公司網站改版的專案，認真的把 GSAP 3 重新再研究了一次，而之前買的進階外掛 (Shockingly Green) 也終於派上用場 (用來分割文字的 SplitText 外掛)。
這次公司網站的改版，除了使用 GSAP 外，也開始大幅的刪減不必要的靜態資源，與 CSS 樣式，藉此提高效能，但不知道最後成果如何。
