最近發現 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 有比較簡易的寫法，以下是對照表：
| 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%) |
這就是基礎的 GSAP3 的設定方法。
