GSAP基礎語法-前端好好玩用 GSAP 做一個特效

主要四種語法，分別是 to、 from、 fromTo、 set。

to()：從當前狀態到目標狀態，只會執行一次

原本在 A 點移動到 B 點，to 就是從 A 點到 B 點，當執行完畢後就會停止。

gsap.to('#box', { x: 100, duration: 3 })

1	gsap.to('#box', { x: 100, duration: 3 })

form 與 to 非常像易搞混，差別在於 from 是從目標狀態到當前狀態，就是反向的 to 語法。
to() 原本在 A 點移動到 B 點，from() 是從 B 點到 A 點，當執行完畢後就會停止。

gsap.from('#box', { x: 100, duration: 3 })

1	gsap.from('#box', { x: 100, duration: 3 })

fromTo 的寫法會需要傳入兩個物件，
第一個物件是當前狀態，
第二個物件是目標狀態，
當它執行完畢後就會停止。

gsap.fromTo('#box', { x: 0 }, { x: 100, duration: 3 })

1	gsap.fromTo('#box', { x: 0 }, { x: 100, duration: 3 })

fromTo 接近影格概念，須定義當前狀態與目標狀態。

沒有任何動畫效果，僅僅只是定義動畫的初始狀態而已，通常必須搭配前面三種語法使用。

gsap.set('#box', { x: 100 })

1	gsap.set('#box', { x: 100 })

set 通常會做為預先定義安排在最前面。