一、好多動畫

前面我們已經會使用 to()、from() 和 fromTo()，但網頁上動畫效果怎麼可能只有一個，一定會有很多動畫需要按照順序出場及使用它們，例如我做一份報告需要先請標題出現、再來是圖片進場最後可能滑動會有效果之類的。如果一個一個寫會造成程式碼冗長而且會先被自己用亂。

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

二、Timeline是什麼?

最簡單的想法，把它想成是一條動畫時間軸，它可以控制什麼動畫需要先開始以及出場順序該如何調配。這裡來玩個小動畫。
這裡先建立一段文字及給予一張圖片再放一個點擊按鈕。

    <div class="title">Hello GSAP</div>
    <img src="1.png" class="photo"><br>
    <button class="button">快點點我</button>

這裡將這些class給予樣式美化一下但不多。

body{
    text-align: center;
    margin-top: 150px;
}
.title{
    color: black;
    font-style: italic;
    font-size:50px;
    margin-bottom: 20px;
}
.photo{
    border-radius: 50px;
}
.button{
    margin-top: 20px;
    border-radius: 8px;
    border: solid black 3px;
}

最後是最重要而且是我們主題!!!
這裡我們設定文字先出場再來圖片最後是按鈕，圖片是以旋轉的方式進入呈現出來，再來是圖片滑動進來，最後是按鈕由下往上進入畫面。

import { gsap } from "gsap";
const app = gsap.timeline(); 
app.from(
    ".title",{
        y:50,
        opacity:0,
        duration:1,
        rotation:180,
    }
);
app.from(
    ".photo",{
        x:100,
        opacity:0,
        duration:1,
    }
);
app.from(
    ".button",{
        y:30,
        opacity:0,
        duration:1,
    }
)

這裡文字先旋轉出現

再來是圖片有點透明化移動進來

最後是按鈕往上移動進來

這就是畫面呈現樣子啦!!!

三、結論

為什麼我會覺得 Timeline 很方便？因為動畫開始變多之後，我們只要把它們依序放進 Timeline 裡，就可以很清楚地看到整個動畫流程，不會被用到亂七八糟啊啊啊!!! 而且啊之後想修改順序，也只需要調整程式碼的位置就可以更正嘞，原本動畫是一個一個控制，現在可以把它們串成一整段動畫，不覺得輕鬆很多嘛~

但是呢這也讓我開始覺得：
GSAP 不只是讓元素動起來，而是在幫我們管理動畫。

下一篇，就來看看怎麼讓動畫的速度和出現方式變得更自然。