資料出處：(3)前端好好玩用 GSAP 做一個特效 – 第一個動畫
主要四種語法，分別是 to、 from、 fromTo、 set。
to()：從當前狀態到目標狀態，只會執行一次
原本在 A 點移動到 B 點，to 就是從 A 點到 B 點，當執行完畢後就會停止。
1 | gsap.to('#box', { x: 100, duration: 3 }) |
from()：目標到當前狀態 (反向的 to())
form 與 to 非常像易搞混，差別在於 from 是從目標狀態到當前狀態，就是反向的 to 語法。
to() 原本在 A 點移動到 B 點，from() 是從 B 點到 A 點，當執行完畢後就會停止。
1 | gsap.from('#box', { x: 100, duration: 3 }) |
fromTo()：目標到當前狀態，二個物件參數第一個當前、第二個目標狀態
fromTo 的寫法會需要傳入兩個物件，
第一個物件是當前狀態，
第二個物件是目標狀態，
當它執行完畢後就會停止。
1 | gsap.fromTo('#box', { x: 0 }, { x: 100, duration: 3 }) |
fromTo 接近影格概念，須定義當前狀態與目標狀態。
set()：預先定義的初始狀態沒有任何動畫效果
沒有任何動畫效果，僅僅只是定義動畫的初始狀態而已，通常必須搭配前面三種語法使用。
1 | gsap.set('#box', { x: 100 }) |
set 通常會做為預先定義安排在最前面。