之前曾經提到，為了幫公司網站的動畫加入轉場的交錯效果，因此使用了 stagger 的方法。但是今天在看 GSAP 的相關資料時，發現如果能夠活用位置參數的話，便能夠更有彈性的操作自己的時間軸。 GSAP 3 … [繼續閱讀...] 關於 使用 GSAP 的位置參數 (position parameter) 建立更有彈性的時間軸
GSAP
延遲載入 Google Maps 的 2 種方法
大家好，我是 Eric。 在 2020 年底，最後一次公司網站的小改版中，為了改善 Google Page Speed Insights 的成績，因此研究了應該要如何延遲載入 (lazy loading) Google … [繼續閱讀...] 關於 延遲載入 Google Maps 的 2 種方法
使用 GSAP 的 stagger 建立交錯效果
在上次的公司網站改版中，替公司的首頁與招募頁添加預載動畫時，使用時間軸的方式來製作轉場的交錯效果，但為了製作這個效果，必須要另外計算時間差，做起來並不直觀： See the Pen Preload with GSAP … [繼續閱讀...] 關於 使用 GSAP 的 stagger 建立交錯效果
如何用 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 的使用基礎