動畫屬性-前端好好玩用 GSAP 做一個特效

GSAP 的動畫屬性兩大類：

本篇只說明 CSS 屬性，下篇另說明自訂屬性。

GSAP 的 CSS 屬性

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

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

GSAP 的 x 屬性，等於 CSS 的 transform: translateX(100px) 縮寫。
不用 x 縮寫，是可以直接用 transform: translateX(100px)，但程式碼會很長。

gsap.to('.box', { transform: 'translateX(100px)', duration: 3 })

1	gsap.to('.box', { transform: 'translateX(100px)', duration: 3 })

基本上 CSS 屬性都是可以被 GSAP 使用的，像是移動邊旋轉 360 度的動畫。

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

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

邊移動邊縮放的動畫。

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

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

注意所使用的 CSS 屬性有 - 字號 (連字符)，使用駝峰式命名法。
GSAP 的 backgroundColor 為 CSS 的 background-color 的縮寫，遇到時使用駝峰式命名法。

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

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

to() 方法的第一個物件中撰寫 CSS 動畫屬性，也可以使用 css: {} 物件來撰寫 CSS 動畫屬性。

這樣的方式比較麻煩會額外寫一個 css: {} 屬性，實戰上還是會使用直接縮寫的做法。

gsap.to(
 '.box',
 {
   css: {
     x: 100,
     backgroundColor: 'red'
   },
   duration: 3,
 }
)

gsap.to(

'.box',

{

css: {

x: 100,

backgroundColor: 'red'

duration: 3,

}

)