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 樣式,藉此提高效能,但不知道最後成果如何。

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料