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 的屬性,對應如下表:

GSAP CSS
x: 100 transform: translateX(100px)
y: 100 transform: translateY(100px)
rotation: 360 transform: rotate(360deg)
rotationX: 360 transform: rotateX(360deg)
rotationY: 360 transform: rotateY(360deg)
skewX: 45 transform: skewX(45deg)
skewY: 45 transform: skewY(45deg)
scale: 2 transform: scale(2, 2)
scaleX: 2 transform: scaleX(2)
scaleY: 2 transform: scaleY(2)
xPercent: 50 transform: translateX(50%)
yPercent: 50 transform: translateY(50%)





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




使用 fromTo 設定前後的樣式



留言