GSAP3 教學- tweens 補間動畫

最近發現 GSAP 更新到 3.x 版了，寫法也跟以往不一樣，覺得變簡單也更好懂了，這邊一樣做一下筆記。

首先讀入 GSAP，使用 cdn：

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js

或利用 npm install：

npm install gsap

GSAP3 跟以往的差別是現在統一使用 gsap 物件，不用像以前需要分 tween 或 timeline 了，以下是使用方法：

• gsap.to(target, vars)- 設定結尾的樣式
• gsap.from(target, vars)- 設定開頭的樣式
• gsap.fromTo(target, fromVars, toVars)- 設定開頭跟結尾的樣式
• vars 為 CSS 的屬性與值，只要是可以做漸變的值都可以設定

範例像這樣，只要設定好 target 跟 CSS 的變化就可以自動產生效果了：

gsap.to(".red", {rotation: 27, x: 100, duration: 1});

GSAP 預設的 CSS trasform 有比較簡易的寫法，以下是對照表：

這就是基礎的 GSAP3 的設定方法。