Docs99

Appearance

Return to top
On this page

GSAP Tween 補間動畫

藉由設置「結束」 or 「開始」的特效，來讓 gsap 自動去補足其中的影格動畫。

指定「最終」特效 gsap.to()

為 目標元素 指定「最終」的特效，gsap 會補足「原始」變化到「最終」特效當中的影格。

語法

gsap.to(target, { vars })

  • target 目標元素，使用 css 選擇器
  • vars 動畫參數設置
js
gsap.to(
  '#logo', // 目標元素
  {
    duration: 2, // 動畫時間 2 秒鐘
    x: '200px', // 橫向移動 200px
  }
)

指定「開始」特效 gsap.from()

為 目標元素 指定「開始」的特效，gsap 會補足「開始」變化到「原本」特效當中的影格。

語法

gsap.from(target, { vars })

  • target 目標元素，使用 css 選擇器
  • vars 動畫參數設置
js
gsap.from(
  '#logo', // 目標元素
  {
    duration: 2, // 動畫時間 2 秒鐘
    scale: 2, // 放大 2 倍
    ease: 'back', // 動畫特效
  }
)

指定「開始」到「最終」位置 gsap.fromTo()

為 目標元素 指定「開始」、「最終」的特效，gsap 會補足「開始」變化到「最終」特效當中的影格。

語法

gsap.fromTo(target, { fromVars }, { toVars })

  • target 目標元素，使用 css 選擇器
  • fromVars 「開始」動畫參數設置
  • toVars 「最終」動畫參數設置
js
gsap.fromTo(
  '#logo', // 目標元素
  {
    // 開始特效
    opacity: 0,
  },
  {
    // 最終特效
    duration: 3, // 動畫時間 3 秒鐘
    opacity: 1, // 可見
    x: '300px', // 橫向移動位置
    ease: 'back', // 動畫效果
    repeat: -1, // 重播: 無限
  }
)

默認設置 gsap.defaults

默認設定值，會套用在後面的補間動畫，但可以被覆蓋。

js
gsap.defaults({
  duration: 5,
  ease: 'back',
})

gsap.to('.play-element', {
  xPercent: 500,
})

動畫操作方法

可以藉由動畫操作方法，對 目標元素 實體，進行任意的操作。

方法:

  • .play() 播放
  • .pause() 暫停
  • .reverse() 倒轉
  • .restart() 重新開始
js
const logo = gsap.fromTo(
  '#logo',
  {
    opacity: 0,
    x: -400,
  },
  {
    opacity: 1,
    x: 400,
    rotation: 720,
    duration: 4,
  }
)

document.querySelector('#play').onclick = () => logo.play()
document.querySelector('#reverse').onclick = () => logo.reverse()
document.querySelector('#pause').onclick = () => logo.pause()
document.querySelector('#restart').onclick = () => logo.restart()

常用動畫參數設置

以下是在 Vars 中，常見的設置 更詳細，可參考

設置類

屬性說明
duration動畫時間 (以「秒」為單位)，默認 0.5
ease動畫「播放過程樣式」，默認 power1.out 參考更多
paused動畫創建後，是否「暫停」，默認 false
delay動畫播放前的「延遲時間」 (以秒為單位)
repeat動畫「重播次數」，默認 0 只播 1 次、-1 無限播放、1 會播 2 次
stagger「交錯播放」。如果有多個 目標元素 可以交錯啟動播放。stagger: 0.1 每個元素啟動播放的間隔是 0.1 秒
onStart函式，動畫開始前執行
onComplete函式，動畫完成後執行

特效類 更多

屬性說明
x橫向位移，等於 transform: translateX()
y直向位移，等於 transform: translateY()
rotation旋轉，等於 transform: rotate()
opacity透明度
scale放大 / 縮小
transformOrigin定位 "0% 100%"

動態設置值

除了可以直接設置屬性的「值」，也可以使用「隨機」、「函式」方法。

亂數方法

亂數範圍: -100 到 100 隨機產生

js
gsap.to('.logo', {
  x: 'random(-100, 100)',
})

指定亂數: 0 或 50 或 100 隨機產生

js
gsap.to('.logo', {
  x: 'random([0, 50, 100])',
})

函式方法

函式方法會有三個參數帶入，再依需求參考使用，而最後必須要 return 作為設置值。

js
gsap.to('.logo', {
  x: function (index, target, targets) {
    console.log(`目標元素索引: ${index}`)
    console.log(`目標元素: ${target}`)
    console.log(`目標元素群: ${targets}`)

    return (index + 1) * 100
  },
})

  • index 目標元素的索引值

    假設，有多個 .logo 元素，第一個 目標元素 索引值就是 0、第二個 1 ...以此類推。

  • target 目標索引元素

    操作的 目標索引 元素本身。

  • targets 目標索引群

    陣列存放所有 目標元素。

跑馬無限播放

  • 容器 overflow: hidden;
  • 文字設置「不換行」
  • 橫移一半就結束 xPercent: -50
  • 無限播放
DEMO CODE

js

js
const liEl = document.querySelectorAll('li')

gsap.to(liEl, {
  xPercent: -50, // 移動 -50%
  duration: 10, // 時間
  ease: 'none', // 無特效播放
  repeat: -1, // 無限播放
})

html

html
<div class="container">
  <ul class="loop-area">
  <li>
    <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP </span>
     <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP</span>
   </li>
  <li>
    <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP </span>
     <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP</span>
   </li>
  <li>
    <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP </span>
     <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP</span>
   </li>
</ul>
</div>

css

css
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  height: 100vh;
  overflow: hidden;
  max-width: 100%;
}

.loop-area {
  display: inline-block; /* 強化無限播放，視覺 */
  font-family: 'Dela Gothic One';
  font-size: 4.5rem;
  color: transparent; /* 透明字體 */
  -webkit-text-stroke: 1px #2e2e2e; /* 字體邊框樣式 */
  white-space: nowrap; /* 文字不換行 */
}

li > span {
  display: inline-block; /* 強化無限播放，視覺 */
}

Reference