# GSAP3 (GreenSock Animation Platform) [](https://greensock.com/)
{%youtube RYuau0NeR1U %}
## 甚麼是 GSAP
一個透過 javascript library 就可以輕鬆實現 css 動畫的強大套件
在 [v2](https://greensock.com/docs/v2) 版本的基本核心有 4 個
1. [TweenLite](https://greensock.com/docs/v2/TweenLite) 最輕量做動畫的 api 套件
2. [TweenMax](https://greensock.com/docs/v2/TweenMax) 顧名思義...樓上的加強版
3. [TimelineLite](https://greensock.com/docs/v2/TimelineLite) 當動畫不單純只有一個時就會考慮到 **時間順序** 的概念, 這個套件大大增加了可以做很多複雜動畫的可能:+1::+1::+1:
4. [TimelineMax](https://greensock.com/docs/v2/TimelineMax) !@@#$%%%^^%^&*:arrow_up:
5. 當然還有一些額外的 Plugins, Core Eases, Extra Plugins, Other Tools......
應有盡有,概念就是要用甚麼查查看對應的 api source, 看是要用 cdn 或是自己載回來用
==**<font color="#f00">但是</font>**==
還蠻麻煩的, 要用甚麼就把相關的物件實體化出來操作, 如果動畫一多就會到處都是很複雜......
But But But But But But But But
GSAP3 出現幾乎把所有的功能都整合在 [gsap](https://greensock.com/docs/v3/GSAP) 這個物件, 就是一個大補丸:muscle: = :pill::pill::pill::pill:
把之前的四個核心都整合在裡面了,更棒的是不用在東生一個西呼叫一個~~~
 
## 開始製作動畫
首先我們來認識一下組成動畫函式的一些參數結構
萬物起始於 gsap 這個物件
在製作動畫的起手函式有下列三種
1. `gsap.to(target, vars)`
2. `gsap.from(target, vars)`
3. `gsap.fromto(target, fromVars, toVars)`
`target`: 是我們想要對哪個 element 加上動畫，這裡我們會填入 css selector
`vars`: 是一個物件的形式的參數,各式各樣的動畫屬性設定我們都可以放到這個物件裡面
沒了~謝謝大家:bow:
**阿**... 💀💀💀
真的就那麼簡單,其實你已經學完了:kiss:
再來就是想用甚麼去看 doc 或 官方提供的 codepen 來學習囉
哎喲~開玩笑的啦,其實還有很多種玩法和其他炫砲的效果
讓我們還是從基礎的範例來認識一下
### GSAP to
> `gsap.to()`: 這個函式的意思是使你的 element 透過 vars object 的設定從原始 element 的狀態轉換過去
阿你是在講三小朋友...
讓我們來看 code 吧!
<iframe height="265" style="width: 80%;" scrolling="no" title="gsap to method" src="https://codepen.io/okokhaha/embed/PobaEgx?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/okokhaha/pen/PobaEgx'>gsap to method</a> by okok
(<a href='https://codepen.io/okokhaha'>@okokhaha</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
就是那麼輕鬆簡單沒負擔
方塊的初始位置就是在左邊
我們設定了 `duration` 是動畫所執行的時間(秒)
`x` 為水平方向向右移動的 px
甚麼你說有點單調???
那我們來加上有趣的 `ease` 吧!
<iframe height="530" style="width: 85%;" scrolling="no" title="gsap3-ease" src="https://codepen.io/okokhaha/embed/wvoyNyd?height=330&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/okokhaha/pen/wvoyNyd'>gsap3-ease</a> by okok
(<a href='https://codepen.io/okokhaha'>@okokhaha</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
gsap 提供了多達 13 種的 漸變函式 再加上都有獨特的 in, out, inout 可做搭配, `13 * 4 = 52` 這麼多種絕對有你需要的
`in`: 在動畫一開始使用 ease
`out`: 在動畫結尾使用 ease
`inout`: 你猜猜
如果真的不行就來試試 [GreenSock Ease Visualizer](https://greensock.com/docs/v3/Eases) 來製作獨一無二的 `ease` 吧!
### GSAP from
> `gsap.from()`: 這個函式的意思是使你的 element 透過 vars object 的設定返回到 element 的原始狀態
**<font color="#f00">私心常用推薦</font>** ~~至於為什麼我也不知道~~
來點寇丁
<iframe height="265" style="width: 100%;" scrolling="no" title="tweenmax_stagger_cirle" src="https://codepen.io/okokhaha/embed/LYbjvWP?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/okokhaha/pen/LYbjvWP'>tweenmax_stagger_cirle</a> by okok
(<a href='https://codepen.io/okokhaha'>@okokhaha</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
開始有點趣味了喔
挖賽怎麼我每次重整圓形都上下隨機出現
你用了 javascript 寫了甚麼 random 函式嗎?
:x: :x: :x:
我用了 `random`: 可以設定一段隨機的區間,放在 y 軸屬性上
天曉得要是自己寫要花點時間......
或許你注意到了,每一個圓形都是依序出現的
這就是設定了 `stagger`: 設定一個依序執行的延遲時間(秒)
天曉得要是我寫 css animation delay 要寫多久,要控制的圖形變多就很刺激了 :sweat_drops:
只有這樣而已嗎?
[stagger](https://greensock.com/docs/v3/Staggers) 還有更多玩法
<iframe height="265" style="width: 100%;" scrolling="no" title="tweenmax_stagger_cirle_more" src="https://codepen.io/okokhaha/embed/PobaeYJ?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/okokhaha/pen/PobaeYJ'>tweenmax_stagger_cirle_more</a> by okok
(<a href='https://codepen.io/okokhaha'>@okokhaha</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
```javascript=
stagger: { // wrap advanced options in an object
each: 0.1,
from: "center",
grid: "auto",
ease: "power2.inOut",
repeat: -1 // Repeats immediately, not waiting for the other staggered animations to finish
}
```
stagger 屬性也可以傳入一個物件去更詳細的客製化你要的設定
覺得最有趣的屬性 from: **start/center/edges/random/end** 選擇動畫啟動的順序
### GSAP fromTo
> `gsap.fromTo()`: 這個函式就是把 from 和 to 加在一起玩, 接受兩個物件參數，順序是 from, to
<iframe height="500" style="width: 100%;" scrolling="no" title="gsap from to" src="https://codepen.io/okokhaha/embed/XWNBJRr?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/okokhaha/pen/XWNBJRr'>gsap from to</a> by okok
(<a href='https://codepen.io/okokhaha'>@okokhaha</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
這裡 stagger 物件加了兩個新屬性
`yoyo`: 像溜溜球一樣來回跑
`repeat`: 設定 -1 就是無限動畫
以上就是基本的動畫需要用到的情況
其實還有一些有趣的功能可以讓你自由自在的操作動畫 [Tween Control](https://greensock.com/docs/v3/GSAP/Tween)
### Tween control
<iframe height="500" style="width: 100%;" scrolling="no" title="gsap-tween-control" src="https://codepen.io/okokhaha/embed/ExNEmer?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/okokhaha/pen/ExNEmer'>gsap-tween-control</a> by okok
(<a href='https://codepen.io/okokhaha'>@okokhaha</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
來人啊上扣
```javascript=
// 如果要控制 ele 先存成變數
// 把 var 物件裡的 paused 給 true 避免一開始就啟動
const tween = gsap.to('.box', {
duration:5,
x: 600,
ease:'linear',
paused: true
});
const play = document.querySelector('#play');
const pause = document.querySelector('#pause');
const reverse = document.querySelector('#reverse');
const restart = document.querySelector('#restart');
const mode = document.querySelector('.mode');
mode.innerText = 'nothing~~';
play.addEventListener('click', function() {
mode.innerText = 'play';
tween.play();
});
pause.addEventListener('click', function() {
mode.innerText = 'pause';
tween.pause();
});
reverse.addEventListener('click', function() {
mode.innerText = 'reverse';
tween.reverse();
});
restart.addEventListener('click', function() {
mode.innerText = 'restart';
tween.restart();
});
```
這裡巧妙的把要操作的動畫物件先存成變數
然後對各個想要做的功能去加上對應的函式
==**<font color="#f00">切記</font>**== 要把動畫的暫停 bool 設 true 啊！
不然搞了半天你都不知道自己在幹嘛ＸＤＤ
接著我們可以來談談集大成了
如果你的頁面上有一個以上的動畫就不得不考慮到 **時間** 這個敏感的問題
試著想想你的頁面上有十幾個動畫,絕對不可能要讓他們同一時間都動作
一定會想先做甚麼在做甚麼@#@#$$%%...
好不容易用 delay 和 duration 調整好時,阿有一個好像慢個三秒比較好
這時你就開始哭 :cry:
### Gsap timeline
這裡我們看一個官網給的 :alien: 範例
<iframe height="500" style="width: 120%;" scrolling="no" title="gsap-timeline" src="https://codepen.io/okokhaha/embed/wvomErb?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/okokhaha/pen/wvomErb'>gsap-timeline</a> by okok
(<a href='https://codepen.io/okokhaha'>@okokhaha</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
```javascript=
// 不使用 timeline
// 每一個 ele 動畫順序都是透過設定 delay 來達成 => 前幾個 ele 動畫 duration 的總和
// 所以當動畫一多，有一個要調整會全部都要調整很麻煩
/*-----------------------
// 背景
gsap.from('#background', {
duration: 1,
opacity: 0
});
// 中央字
gsap.from('#title', {
duration: 1,
delay: 1,
opacity: 0,
scale: 0
});
// ET
gsap.from('#freds img', {
duration: 0.5,
delay: 2,
scale: 0,
stagger: 0.5
});
// 右上時間
gsap.from('#time', {
duration: 1,
delay: 5,
opacity: 0,
xPercent: 100
});
----------------*/
// 使用 timeline
gsap.set('#background', { scale: 0.7 });
gsap.timeline()
.from('#background', {
opacity: 0,
duration: 1
})
.from('#title', {
opacity: 0,
scale: 0,
ease: 'back'
})
.from('#freds img', {
y: '160',
rotation: 45,
stagger: 0.1,
duration: 0.8,
ease: 'back'
})
.from('#time', {
xPercent: 100,
duration: 0.2
});
```
如果我們不用 timeline 去連接要用的所有動畫
會變成有幾個動畫就要用幾個 `to` or `from` or `fromTo`
這會變得麻煩有點雜亂
而且當一個做改動時會牽動其他動畫的時序
而使用了 timeline 所連接的動畫都會等到上一個確實做完了
才會繼續進行下去
這真的方便多了
在新本版中也提供了一個 timeline 方便的功能
官方命名為 [Positioning animations in a timeline](https://greensock.com/docs/v3/GSAP/Timeline)
在動畫函數參數多加一個 string
`+=`, `-=`: 意思是相對於上一個動畫作加減秒數的 delay 值
而我們之前提過 timeline 的特性是當你的上一個動畫確實做完實才會繼續
這樣會有情況是當我們設定了相對這個值時會連帶影響到下一個動畫的出現時間
`<`: 意思就是這個動畫和上一個一起開始 :secret: ~~雖然我不知道我哪時會用到...~~ :secret:
`>`: 意思就是這個動畫等上一個動畫結束後開始 :secret: ~~更妙...~~ :secret:
來看個例子
<iframe height="500" style="width: 130%;" scrolling="no" title="gsap-timeline:position" src="https://codepen.io/okokhaha/embed/rNWrjWv?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/okokhaha/pen/rNWrjWv'>gsap-timeline:position</a> by okok
(<a href='https://codepen.io/okokhaha'>@okokhaha</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
這裡一開始 正方形會水平往右 800 px 花費 5 秒
三角形 基本上要在 5 秒開始做利用 2 秒的時間到 800 px but 他加了 2 :scream: 所以是第 7 秒開始做 到第 9 秒結束動畫
最下面的 :star: 設定了 < , 代表無論如何一定會和上一個同時出發，不過 duration 設定 1
所以在第 8 秒就會到達終點了
有趣吧!
這時你會想 :thinking_face: :thinking_face: :thinking_face:
不對耶 :zany_face:
這樣我是要哪一個碼錶計時慢慢 debug 動畫嗎?
有沒有搞錯...
該來談談我覺得很酷炫的功能了
### GSDevTools
<iframe height="500" style="width: 150%;" scrolling="no" title="gsap-timeline:position with devtools" src="https://codepen.io/okokhaha/embed/poNLQzK?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/okokhaha/pen/poNLQzK'>gsap-timeline:position with devtools</a> by okok
(<a href='https://codepen.io/okokhaha'>@okokhaha</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<iframe height="500" style="width: 150%;" scrolling="no" title="GSDevTools with GSAP Animation" src="https://codepen.io/GreenSock/embed/MvPXqq?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/GreenSock/pen/MvPXqq'>GSDevTools with GSAP Animation</a> by GreenSock
(<a href='https://codepen.io/GreenSock'>@GreenSock</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
介紹了這些基本的操作之後
你已經可以開始做很多有趣的動畫了
裡面還有很多套件可以去挖, 相信你也可以成為動畫大師
Sign in with Wallet
Connect another wallet