一、讓動畫跟著我走

前面我們的動畫都是打開網頁後自己播放，但很多網站不是這樣，當我往下滑時，文字會慢慢出現，圖片也會跟著滑進來，甚至整個畫面都會產生很多不一樣有趣的動畫效果。那.... JavaScript 要怎麼知道我滑到哪裡了？

這時候就可以使用 GSAP 的 ScrollTrigger。

二、ScrollTrigger 是什麼？

ScrollTrigger 可以讓我們用「滾動的位置」來控制動畫。這裡直接舉一個完整的例子示範給大家看:
這裡先重新製作一個簡易的版面

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 從入門到進階：結合 Three.js × GSAP 打造互動網頁</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <section class="hero">
        <div class="text">
        <h1>ScrollTrigger</h1>
        <p>開始往下滑，看看會發生什麼事</p>
        </div>
    </section>

    <section class="section">
        <div class="box">
            <h2>第一個區塊</h2>
            <p>當你往下滑，這個區塊就會出現。</p>
        </div>
    </section>

    <section class="section">
        <div class="box">
            <h2>第二個區塊</h2>
            <p>動畫可以跟著網頁滾動一起發生。</p>
        </div>
    </section>

    <section class="section">
        <div class="box">
            <h2>第三個區塊</h2>
            <p>這就是 ScrollTrigger 的基本應用。</p>
        </div>
    </section>

    <script src="index.js" type="module"></script>
</body>
</html>

這裡CSS最重要的是要讓版面大到可以往下滑動看出動畫進入的效果

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
}

.hero h1 {
    font-size: 60px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
}

.section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    width: 500px;
    padding: 60px;
    text-align: center;
    background: #eeeeee;
    border-radius: 20px;
}

.box h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.box p {
    font-size: 18px;
}

這裡先導入 ScrollTrigger ，再對版面設定動畫效果

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.timeline();
gsap.registerPlugin(ScrollTrigger);
gsap.from(".text",{
    rotation:180,
    x: 150,
    opacity:0,
    duration:1,
    }
);
gsap.from(".box", {
    y: 100,
    x: 100,
    opacity: 0,
    duration: 5,
    stagger: 2,
    ease: "power2.out",
    scrollTrigger: {
        trigger: ".box",
        start: "top 80%"
    }
});

這段的意思是，在頁面往下滑的同時，動畫會跟著我們的滑動接著出現。

三、trigger 又是什麼？

這裡的 trigger: ".box" 就是告訴 ScrollTrigger「我要查看的元素是誰？」再來是 start: "top 80%" 則是在設定動畫什麼時候開始。

我們可以簡單理解為:
:::info
trigger → 看是誰
start → 何時開始
:::

這時候動畫就不需要使用者按按鈕，而是可以跟著網頁滾動自然出現。

四、結論

透過這幾天對GSAP的了解，想必都有好好學進去，我們目前為止學會移動方塊、延誤一下動畫再跳出來又或者是讓動畫一個一個出現這些基本操作。

接下來就可以將所有的技能串在一起來製作一份簡易且好玩的GSAP小作品。