因為這次的公司改版專案大量使用 GSAP 的 ScrollTrigger 功能。由於 ScrollTrigger 主要的功能便是在偵測頁面捲動行為，事實上和 AOS 做到的性質大同小異，而我在使用 AOS … [繼續閱讀...] 關於 用 ScrollTrigger 取代 AOS
animation
如何用 ScrollTrigger 選擇多個元素/物件
在〈使用 GSAP 的 ScrollTrigger 製作捲動動畫〉中，我們介紹了 ScrollTrigger 的基礎用法，搭配 gsap.to( onUpdate: callback ); … [繼續閱讀...] 關於 如何用 ScrollTrigger 選擇多個元素/物件
使用 GSAP 的 ScrollTrigger 製作捲動動畫
原本我是透過 AOS 這款 JavaScript 函式庫製作頁面捲動的動畫 (animation on scroll)，但這次公司網站改版，需要較複雜的動畫，因此必須改用 GSAP … [繼續閱讀...] 關於 使用 GSAP 的 ScrollTrigger 製作捲動動畫
GSAP 3 的使用基礎
在快要一年前，曾經寫過〈使用 GSAP CSSRulePlugin 選取虛擬元素〉，來製作底線的特效。最近則因為公司網站又要再度改版，大幅提升動畫的使用比例，因此開始進一步研究 GSAP 的使用方法。 今天主要是用下面的範例來說明一些 … [繼續閱讀...] 關於 GSAP 3 的使用基礎
使用 GSAP CSSRulePlugin 選取虛擬元素 (pseudo-element)
之前為了幫公司網站插入動畫，稍微接觸了 GSAP 這款動畫函式庫。其中，為了製作「畫底線」的效果，因此使用了虛擬元素，替文字增加了底線，作法如下： 要做出「畫線」的效果，可以透過將 width: 0; 變成 width: … [繼續閱讀...] 關於 使用 GSAP CSSRulePlugin 選取虛擬元素 (pseudo-element)