GSAP 的動畫事件主要有以下。
- onStart
- onUpdate
- onComplete
- onRepeat
- onReverseComplete
onStart：動畫開始執行時觸發
onStart 動畫事件的觸發的時機，在於動畫開始執行時。
onStart 在動畫開始時就觸發，如果使用了 alert 時，會發現動畫會先卡住，等按下確認後才會繼續執行動畫。
1 2 3 4 5 6 7 | gsap.to("#box", { x: 500, duration: 1, onStart() { console.log("onStart"); }, }); |
onUpdate：動畫執行過程中觸發，執行時會連續觸發
onUpdate 觸發時機是在動畫執行過程中，過程中會發現 console.log("onUpdate"); 會一直被觸發。
1 2 3 4 5 6 7 | gsap.to("#box", { x: 500, duration: 1, onUpdate() { console.log("onUpdate"); }, }); |
onComplete：動畫完成時觸發
當動畫完成時，就會觸發 onComplete 事件。
1 2 3 4 5 6 7 | gsap.to("#box", { x: 500, duration: 1, onComplete() { console.log("onComplete"); }, }); |
onRepeat：重複執行時觸發
onRepeat 事件是在動畫重複執行時觸發，因此動畫有設定重複執行的話，就會觸發 onRepeat 事件。
1 2 3 4 5 6 7 8 | gsap.to("#box", { x: 500, duration: 1, repeat: -1, onRepeat() { console.log("onRepeat"); }, }); |
onReverseComplete：動畫反向執行完成觸發
onReverseComplete 事件是在動畫反向執行完成時才會觸發的事件，這個事件的使用時機並不多比較常用 onComplete 為主。
資料來源：