Skip to main content

[GreenSock] GSAP 初探

GSAP是一個強大的網頁動畫工具，幫助網頁開發者減少很多開發的時間，就可以達到順暢且精美的動畫。

GitHub 範例程式碼

HTML​

這邊使用 cdn 的方式匯入 gsap 的 javascript 程式碼

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"
  defer
></script>

而整個文件的架構如下，分成 header，content，footer，header 裡面放著三個連結，content 包含兩個 sidebar 和一個 button。

加入一些 CSS 後，長得如下

GSAP​

接下來透過 gsap 來進行 dom 元素操作，主要是透過元素的 class 去選擇，依照from和to來決定動畫從何開始和到哪裡結束。

gsap.from(".header", { duration: 1, y: "-100%", ease: "bounce" });
// header 從y: -100%開始，一秒間透過bounce的動畫效果回到原處
gsap.from(".link", { duration: 1, opacity: 0, delay: 1, stagger: 0.5 });
// delay 為延遲時間， stagger 為元素之間的延遲時間
gsap.from(".right", { duration: 1, x: "-100vw", delay: 1, ease: "power2.in" });
// power2.in 為內建的動畫速度，很有速度感
gsap.from(".left", { duration: 1, delay: 1.5, x: "-100%" });
gsap.to(".footer", { duration: 1, y: 0, ease: "elastic", delay: 2.5 });
// 原位置在`transform: translateY(-100%)`，往上elastic出現
gsap.fromTo(
  ".button",
  { opacity: 0, scale: 0, rotation: 720 },
  { duration: 1, opacity: 1, scale: 1, rotation: 0, delay: 3.5 }
  // fromTo 要設定起始與結束的狀態，這個按鈕會從無到有，旋轉720度出現
);

而因為上面的屬性像是duration很常需要更改而且大部分相同，我們可以透過timeline的方式去做撰寫，這樣也可以將delay拿掉，減少人工設計動畫秒數出錯的可能性，這樣也可以減少許多程式碼(精簡明瞭)，以及使用反轉動畫的功能。

const timeline = gsap.timeline({ defaults: { duration: 1 } }); // 設定default，全部timeline都適用
timeline
  .from(".header", { y: "-100%", ease: "bounce" })
  .from(".link", { opacity: 0, stagger: 0.5 })
  .from(".right", { x: "-100vw", ease: "power2.in" })
  .from(".left", { x: "-100%" }, "<.5") // <.5 指定前一個動畫結束後過0.5秒執行
  .to(".footer", { y: 0, ease: "elastic" })
  .fromTo(
    ".button",
    { opacity: 0, scale: 0, rotation: 720 },
    { opacity: 1, scale: 1, rotation: 0 }
  );

最後，透過中間的 button，我們在上面裝上點擊的監聽器，觸發反轉動畫，timeScale為動畫快速幾倍，reverse為反轉動畫。

const button = document.querySelector(".button");
button.addEventListener("click", () => {
  timeline.timeScale(3);
  timeline.reverse();
});

完成的動畫如下

參考資料​