(1)前端好好玩用 GSAP3 做一個特效 - 誰是 GSAP？

前言

身為一名前端工程師來講其實很常做特效，那麼 GSAP 就是一個非常好用的工具，它可以讓我們在網頁上做出許多有趣的動畫特效，並它的 API 也相當簡單，所以就乾脆來寫一系列的 GSAP 教學文章吧。

什麼是 GSAP？

GSAP 全名是 Green Sock Animation Platform，中文翻譯綠襪動畫平台，簡單來講它是一個方便我們製作動畫的工具。

其實 GSAP 前身叫做 TweenMax，所以你可能會看到一推文章提到 TweenMax、TweenLite、TweenMax、TimelineMax，這些都是 GSAP 的不同版本，而後來 GSAP 為了方便開發者所以就乾脆整合成了 GSAP 這個工具，後來官網也改叫做 GSAP。

至於 GSAP 有什麼特色呢？簡單來講就是它非常簡單，而且性能方面也非常強大，更不用說 GSAP 的兼容性也很強大，主流框架都有支援，其中包含我之前介紹的「PixiJS V5 教學」也有使用到 GSAP，因此我們可以得知 GSAP 的兼容性非常好且強大。

除此之外 GSAP 本身有提供相當多的插件，例如：MotionPath Plugin（運動路徑）、DrawSVG Plugin（SVG 路徑繪畫）、ScrollToPlugin(滾動動畫) 等等，透過這些套件我們可以做出相當豐富的動畫特效，而這些套件大部分都是免費的，所以基本上你可以很安心無痛的使用，當然還是有少部分是要付費的，但是付費的套件也不多就是了。

那麼這一系列會比較著重於 GSAP3 的基礎入門，畢竟 GSAP3 已經是當前最新的版本且是官方所推薦的版本，因此就會從 GSAP3 開始，而範例程式碼都會放在 CodePen 上，因此你可以透過這個連結獲取。

基本上每一篇的章節我都打算撰寫少一點，盡可能減少一次吸收的量，因此每一篇的幅度並不會很長，因此應該會比較容易吸收，而每一篇我都會提供範例程式碼 + CodePen，這樣你就可以很輕鬆的練習了。