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，可以很簡單的套用基本的捲動動畫。
延伸閱讀
