Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

如何用 ScrollTrigger 選擇多個元素/物件

在〈使用 GSAP 的 ScrollTrigger 製作捲動動畫〉中,我們介紹了 ScrollTrigger 的基礎用法,搭配 gsap.to( onUpdate: callback ); 來做出計數器的捲動特效。

這次,為了要讓〈GSAP 3 使用基礎〉中的示範可以隨捲動而顯示,而一個頁面中不一定只會有一個 h2 標題,因此除了使用 ScrollTrigger 外,還需要可以一次選擇多個元素。

一開始的失敗作品如下:

See the Pen background-crop-scrolltrigger by Eric Chuang (@eric-chuang) on CodePen.

在這個失敗案例中,可以發現在整個頁面執行下來,只有一次觸發的 start 和 end。重新再看了一次官方文件後,看到範例中的這段註解:

scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)

原來是因為 trigger: '.title-bg' 的方式真的只會觸發「一次」,因此必須透過迴圈的方式來選取物件。因為當下並沒有想到要如何多次觸發,因此把這個失敗的 Codepen 拿到 GSAP 的討論區詢問。稍早前得到一位熱心網友 akapowl 的回覆,將我的問題分解為幾個步驟:

  1. 透過 gsap.utils.toArray( '.title-bg' ).forEach() 的方式,直接選取多個元素。
  2. 先將字詞切分開來,再用 gsap.set() 設定預設值。
  3. 在迴圈中建立時間軸 (原本失敗的主因,是因為我試圖在「迴圈外」製作時間軸)。

將原本的寫法重新整理後,可以改為以下的作法:

<h2 class="title-bg" data-background="{{背景路徑}}">
  標題
</h2>

<h2 class="title-bg" data-background="{{背景路徑 2}}">
  標題 2
</h2>
/* 
 * Credit by akapowl.
 */
gsap.utils.toArray( '.title-bg' ).forEach( ( title ) => {
  // 透過迴圈的方式選擇多個 title-bg 元素
  
  const splitText = new SplitText( title, { type: 'chars' } );
  // 每次都要重新跑過文字分割
  const chars = splitText.chars;
  // 分割後儲存為 chars 這個物件
  
  gsap.set( chars, { clipPath: 'polygon(0 0, 0 0, 0 100%, 0 100%)' } );
  // 用 clip-path 設定文字裁切
  gsap.set( title, {
    backgroundImage: 'linear-gradient( #fff 100%, transparent 100%), url(' 
    + title.dataset.background + ')'
  })
  // 用另一個 .set() 方法,設定當前 title 的背景圖,
  // 使用我們在 HTML 的 data-background 這個屬性。
  
    const tl = gsap.timeline({
      // 建立時間軸
      scrollTrigger: {
        trigger: title,
        // 以當前選取的物件作為觸發基準
        start: 'top center',
        toggleActions: "play none none reverse",
        markers: true,
      }
    });
  	/*
     * 這裡才開始真的製作補間動畫。
     */
    tl  
    .to(title, {
      duration: 1,
      backgroundImage: 'linear-gradient( #fff -100%,transparent 10%),url('
       + title.dataset.background + ')'
    })  
    .to(
    chars,
    {
      duration: 0.5,
      clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)'
    })
    ;
  
  
});

修改後的執行結果如下:

See the Pen background-crop-scrolltrigger by Eric Chuang (@eric-chuang) on CodePen.

這邊一併附上 akapowl 提供的範本。我做的修正主要是改成利用 data-background 來動態載入背景圖片,因為這種作法在後續搭配 WordPress 程式時比較方便。

See the Pen background-crop-scrolltrigger by Paul Slawik (@akapowl) on CodePen.

結語

GSAP 真的是個坑,就像是 WordPress 一樣。

結論來說,如果你同一個頁面上,會有多個相似的區段,那麼你要先考慮的是透過 forEach 的迴圈方式,來達到選取多個元素的效果。

儘管因為授權方式的關係,並沒有任何一款上架的外掛,能夠搭配 GSAP 函式庫,但其他專精於 WordPress 解決方案的網站公司,如板塊設計或是敲敲設計,在一些進階客製化的專案中,也都會使用 GSAP 來作為解決方案。

預設圖片
Eric Chuang

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

發佈留言

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

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