一、動起來卻感覺怪怪滴

現在我們已經可以讓很多元素按照順序出現。但實際做網頁時，你可能會發現這個動畫太快、太慢，或是全部一起出現，看起來還是有點生硬，而且有一種不順的感覺，這時候就可以用一些小工具調整動畫的節奏。

二、delay晚一點啊

這邊解釋一下delay，中文是遲到的意思，那這裡顧名思義就是晚一點開始。
這裡delay:1 意思是等待一秒後開始動畫。

app.from(
    ".button",{
        y:30,
        opacity:0,
        duration:1,
        delay:1
    }
)

三、stagger一個一個出現

如果此刻頁面上會有許多元素如何讓它看起來順暢?stagger能夠讓多個元素的動畫依序啟動，營造出流暢、有節奏感的序列效果。
這邊先給予五個方塊，讓他依序出現中間間隔0.5秒。

    <div class="box red"></div>
    <div class="box black"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
    <div class="box pink"></div>

body{
    text-align: center;
}
.box{
    width: 100px;
    height: 100px;
    border-radius: 8px;
    margin: 24px;
}
.red{
    background-color: red;
}
.black{
    background-color: black;
}
.green{
    background-color: green;
}
.blue{
    background-color: blue;
}
.pink{
    background-color: pink;
}

import { gsap } from "gsap";
const app = gsap.timeline();
 
app.from(
    ".box",{
        y:50,
        opacity:0,
        duration:0.5,
        rotation:180,
        stagger:0.5,
    }
)

以下有循序漸進的感覺，一個一個出現在網頁上。

四、ease速度是可以改變的

最後還有一個很常看到的 ease: "power2.out"，它可以控制動畫的速度變化，例如一開始移動比較快，最後慢慢停下來，就會比單純等速移動自然很多。

• .in（漸快）：動畫剛開始時速度很慢，然後逐漸加速。
• .out（漸慢）：動畫一開始速度最快，然後慢慢減速並停下來（最常用於自然停止的物件）。
• .inOut（頭尾慢、中間快）：開始時慢、中間加速、結束前再慢慢減速（像汽車起步與煞車）。

再來是 power:
常見的強度與種類包括 power1、power2、power3、power4，數字越大，加速或減速的曲線就越劇烈。另外還有像 bounce（彈跳）、elastic（彈簧）等特殊效果等我們來遊玩。接下來就可以把這些東西放進真正的網頁裡。

下一篇，讓我們試試看：不用按按鈕，直接用滑鼠滾動控制動畫。