Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

用 ScrollTrigger 取代 AOS

因為這次的公司改版專案大量使用 GSAP 的 ScrollTrigger 功能。由於 ScrollTrigger 主要的功能便是在偵測頁面捲動行為,事實上和 AOS 做到的性質大同小異,而我在使用 AOS 時,用到的動畫種類蠻固定的,因此決定直接用 ScrollTrigger 直接取代 AOS。

程式碼片段

<div class="wrap">
  <h2 data-aos="fade-up">First H2</h2>
  <p data-aos="fade-up">This is a paragraph.</p>
  <h2 data-aos="fade-left">Second H2</h2>
  <p data-aos="fade-up">This is a paragraph.</p>
  <h2 data-aos="fade-up">Third H2</h2>
  <p data-aos="fade-down">This is a paragraph.</p>
  <h2 data-aos="fade-right">Fourth H2</h2>
  <p data-aos="fade-up">This is a paragraph.</p>
  <h2 data-aos="fade-up">Fifth H2</h2>
  <p data-aos="fade-up">This is a paragraph.</p>
</div>

為了要確保頁面寬度不會因為動畫而被改變,因此通常會用一個區塊來包覆要顯示動畫的區塊,並加上 overflow: hidden; 的樣式。以上述為例,便是 .wrap 這個區塊。

.wrap {
  overflow: hidden;
}

為了要一次定義「上、下、左、右」四種方向,因此將程式碼用以下的方式表現:

gsap.utils.toArray( '[data-aos^=fade]' ).forEach( ( ele ) => {
  const direction = ele.dataset.aos.split('-')[1],
        proxy = {
          up: [0, 50],
          down: [0, -50],
          left: [50, 0],
          right: [-50, 0],
        };
  gsap.from( ele, {
    scrollTrigger: {
      trigger: ele,
      start: 'top bottom',
      toggleActions: 'play none none reverse',
      markers: true,
    },
    duration: 0.5,
    opacity: 0,
    xPercent: proxy[direction][0],
    yPercent: proxy[direction][1],
  });
});

實作結果

See the Pen Use ScrollTrigger to Replace AOS by Eric Chuang (@eric-chuang) on CodePen.

結語

如同一開始提到的,之所以會用 ScrollTrigger 來取代 AOS,是因為這次網站改版大量使用 GSAP 的動畫功能,因此在涵蓋範圍比 AOS 大的情況下,透過上述較短的程式碼,定義好自己常用的動畫功能。

如果今天沒有用 GSAP 的話,我仍然建議直接用 AOS,可以很簡單的套用基本的捲動動畫。

延伸閱讀

預設圖片
Eric Chuang

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

發佈留言

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

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