前言

F2E_demo.gif

各位開發者朋友好，想問大家有沒有看過2022 F2E的介紹頁了呢，本篇文章將以這個介紹頁的動畫為範例，向各位解釋其動畫背後是如何實作的，簡單來講就是要簡易復刻2022 F2E介紹頁！另外也提供對網頁動畫有興趣的你一個入門的途徑。

我們即將介紹的套件 GSAP 是一個強大的 JavaScript 動畫套件，讓開發者能夠以時間軸的概念創建具有時間先後順序的動畫效果，用來精準控制動畫以便應付各種場景，而不用受限於 CSS 原生的 keyframe 以及 animation

另一方面，因為 GSAP 輕量化且擴充性強，加上能做到的動畫效果實在是很廣，可以看到很多網站採用 GSAP 套件，想看 GSAP 可以做到哪些效果，可參考 GSAP Showcase

安裝方式－以CDN引入為例

本篇文章主要著重在套件的使用方式，礙於篇幅有限因此所有 demo 都先以 CDN 的方式引入，實際開發會用 npm下載搭配 Modules 引入的方式來使用 GSAP，詳見GSAP Installation

在 body 結尾標籤引入 GSAP 核心、兩個套件（ScrollTrigger、TextPlugin）、一個撰寫 js 的檔案

<body>
...
...

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/TextPlugin.min.js>"></script>
<script src="./all.js"></script>
</body>

注意，必須在 js 撰寫gsap.registerPlugin(ScrollTrigger, TextPlugin)來註冊我們額外引入的 ScrollTrigger 與 TextPlugin 套件，因為後續章節會使用到這兩個 gsap 套件

gsap.registerPlugin(ScrollTrigger, TextPlugin);

GSAP intro

我們說 GSAP 是一個用來實作動畫的 JavaScript 套件，那實際上是怎麼運作的呢？

我們F12打開控制台觀察 HTML 的變化，發現套件會動態渲染 style 屬性，讓畫面動起來