GSAP 的 TweenMax 基礎教學

GSAP(GreenSock Animation Platform)是一個老牌的動畫服務，以往用在 flash 上，後來在 js 也都可以拿來使用，最近也滿多人把這隻應用在專案上，所以這邊也來介紹一下。


照文件的說明這隻在 DOM, SVG 和 canvas 都可以使用，使用的方法也是先下載或是透過 cdn 連結就可以開始使用了。

cdn 連結網址: https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js


用法是 TweenMax.to()，裡面包含三個要素：
TweenMax.to(選擇器, 時間(單位: 秒), {屬性});


基本的應用如下：



裡面的屬性結合了 CSS3 的屬性，可以讓我們少寫很多 CSS3 的屬性，對應如下表：

使用 TweenMax.from() 則可以讓動畫從設定的地方回到原本的地方




使用 fromTo 設定前後的樣式