一、上一篇的動畫是怎麼做的？

上一篇我們使用了

gsap.to(".box", {
    x: 300,
    duration: 1
});

gsap.to() 可以控制元素的狀態，把它比喻成「讓元素變成我指定的狀態」，那如果我想要反過來呢 ? 這裡介紹一個簡單的用法，既然 gsap.to() 是從 「CSS預設的點」 到 「指定的點」，那麼我們想要反過來變成從 「指定的點」 到 「CSS預設的點」就使用 gsap.from() 。

二、gsap.from() 是什麼？

這邊舉個例子，我希望三個方塊從移動後的位置回到移動前的位置。
這裡先在HTML建立三個區塊 (顏色區分較明顯)

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

再去CSS讓方塊能夠呈現出來

.box{
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin: 24px;
}
.red{
  background: red;
}
.blue{
  background: blue;
}
.black{
  background: black;
}

最後就是GSAP的設定，這裡設定一開始會在 y:100 的位置往上回到預設位置。
這裡解釋一下程式碼，y:100 就是位置，opacity:0 設定透明度，duration: 5 移動所花費的時間。

import { gsap } from "gsap"; 
gsap.from(
    ".box" , {
        y: 100,
        opacity:0,
        duration: 5,
    }
)

在刷新網頁時，會像這樣帶有點透明感覺浮現上來。

過了5秒後，方塊會回到初始位置，顏色也回到正常。

三、如果我想控制「開始」和「結束」呢？

這邊提到 .to 跟 .from 一個是回到初始位置，一個是從初始位置移動到指定位置，那在寫程式時，我需要指定他從這裡出發，並且在我指定的地方停下，這裡介紹一個用法 gsap.fromTo() 。

import { gsap } from "gsap"; 
gsap.fromTo(
    ".box" , {
        x:100,
        y: 100,
        opacity:0,
    },
    {
        x:500,
        y:100,
        opacity:1,
        duration: 5,
    },
)

初始位置設定在偏靠左的地方，經過5秒之後會移動到偏中間的位置，且顏色也會從透明漸漸變為不透明。


:::info
to() → 到某個狀態
from() → 從某個狀態開始
fromTo() → 指定開始 + 指定結束
:::
以上這三個可以說是之後寫 GSAP 動畫最常用的基本工具。

四、結論

現在我們已經不只是讓一個方塊左右移動。像標題淡入、圖片滑入、按鈕出現，其實都可以用這些基本語法做出來。不過如果今天頁面上有很多元素，而且我希望它們按照順序出現呢？這時候不能只靠一個動畫。

下一篇，就來認識 Timeline，把多個動畫串在一起。