GSAP基礎語法

to()：從當前狀態到目標狀態，只會執行一次
from()：目標到當前狀態 (反向的 to())
fromTo()：目標到當前狀態，二個物件參數第一個當前、第二個目標狀態
set()：預先定義的初始狀態沒有任何動畫效果

選取目標

使用 .className 或是 #idName 的方式
以原生 JS 變數宣告取得 DOM 元素，傳入 GSAP 方法使用
document.querySelector()：單一元素對像
document.querySelectorAll()：多個元素目標
多個個選取對象與特定選取對象
div.box：比較複雜的 CSS 選取方式
[‘.box1’, ‘.box2’]：以陣列取多筆 class 名稱

動畫屬性

GSAP 的 CSS 屬性
GSAP 的 x 縮寫，等於 CSS 的 transform: translateX()
rotate: 360：旋轉 360 度
scale: 2，放大二倍
backgroundColor：以使用駝峰式縮寫，等同於 CSS 的 background-color 背景色
css: {}：GSAP 裡多一層專屬設定的 CSS 屬性，一般不用直接以縮寫方式饌寫

自訂屬性

gsap.registerPlugin() 動畫屬性之自訂屬性
gsap.registerPlugin()：主要用來註冊 GSAP 插件
gsap.registerPlugin() 方法，name 自訂屬性名稱，init(target, value) 傳入目標結點與值
gsap.registerEffect() 動畫屬性之自訂屬性

座標軸

X 軸為水平軸，Y 軸為垂直軸
屬性的 x 與 y，以 translate 的 px 做為單位計算
屬性 xPercent 與 yPercent，以元素自身的高寬為單位計算

Eases

沒有設定 ease 屬性的動畫，動態平均
加入 ease 屬性，快慢的動態感較直接
Power1.easeOut
bounce.out

時間軸／線

沒有時間軸的 gsap 動畫，都是獨立且直接立即播放
tileline 時間軸
透過 gsap.timeline() 宣告變數 tl，將每個動畫對象透過 tl 變數接 gsap 方法串接
tileline 的 defaults 參數，將共用動畫參數做為預設值共用，增加程式碼可讀性
使用 timeline 時間軸後的動畫方法，第三參數用來設定播放的時間，說明 num | += | -= | < | | >-num

控制你的動畫

play()：播放
pause()：暫停
reverse()：反轉
restart()：重新開始
timeScale()：播放速度
seek()：跳到特定時間，不影響實例是否暫停或反轉。
progress()：取得當前動畫速度
kill()：殺死動畫

動畫事件

onStart：動畫開始執行時觸發
onUpdate：動畫執行過程中觸發，執行時會連續觸發
onComplete：動畫完成時觸發
onRepeat：重複執行時觸發
onReverseComplete：動畫反向執行完成觸發

跑馬燈

跑馬燈特效以 GSAP 實作
Ray 的範例
理解原理後，多加上滑入滑出事件，結合 GSAP 動畫暫停與播放

註冊Plugins

註冊 Plugins 方式一：CDN 引用 HTML script src 結構
單一插件註冊
多插件註冊
註冊 Plugins 方式二：模組 import gsap 後再 ScrollTrigger

ScrollTrigger

ScrollTrigger 基本使用
範例說明

資源整理