寫在最前面，為什麼選擇 GSAP？

在撰寫這篇文字的當下，我對於 GSAP 的認識僅停留在做動畫的 JavaScript 函式庫，之前沒有寫過更沒有看過官方文件。

對於才剛踏入網頁開發世界的小菜雞我本人，每次看到在網頁上動來動去的視覺效果，總產生「哇 好酷」但卻對於怎麼透過 GSAP 做出來沒有概念，因此從 0 開始的學習旅程就此展開！

簡介

GreenSock Animation Platform（GSAP）是一款專門用來製作網頁互動動畫的 JavaScript 函式庫，目前版本已更新至 3.13.0。今年 4 月，GSAP 被 Webflow 收購，並轉為完全免費的套件，讓開發者們能更無負擔得使用，創作出更流暢、更有彈性的動畫效果。

兩大基礎核心概念： Tween 與 Timeline

想像我們來到軟糖製作工廠， Tween 就像是軟糖從原料變成成品的整個變化過程，從原料加熱、染色、調味、塑形等多個工序，你只需要告訴它最終想要什麼樣的軟糖，它就會協調所有工序，讓糖果從原始狀態逐步變化到目標狀態；而 Timeline 就像是控制整條軟糖生產線的時間表，決定這些變化什麼時候發生、持續多久。

以上述軟糖製程的例子先來看一下超級入門的程式碼：

 gsap.to('.candy', {
    duration: 0.5, 
    backgroundColor: "pink", //逐漸變粉
    borderRadius: "50%" //逐漸變圓
  })

這段程式碼代表軟糖從方形逐漸變成圓形，同時顏色也變成粉紅。

但有兩件事要注意：

1. 在 GSAP 裡，動畫可以倒帶（Tween 可以反向回到原本狀態），但現實中的工廠可沒辦法！
2. 在 GSAP 裡，多種動畫可以同時進行（e.g.變色＋變形），但工廠製程通常是一步步完成。

總結來說：

• Tween：定義物件從起始狀態到結束狀態的整個變化過程。
• Timeline：管理多個 Tween 的執行順序、時機。

環境設置

方法一：CDN

在 HTML 中加上以下即可。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13/dist/gsap.min.js"></script>

方法二：直接安裝

npm install gsap

並記得將 GSAP import 進專案裡

import gsap from "gsap";

另外，如果想先在 Codepen 裡面嘗試，可以打開 JS 欄位中的設定，在輸入匡打入「gsap」並點選即可引入。

後記

第一眼看到 GSAP 的 LOGO，一直讓我很好奇超人右腳的襪子到底去哪了？是在拯救世界的時候搞丟了嗎？還是被洗衣機吃掉了？在網路上也沒有查到相關的官方解釋，但或許是一隻襪子的獨特性，讓這個 LOGO 更有記憶點吧！