GSAP
安裝至Angular
首先 npm 載入
gsap & @types/gsap
https://greensock.com/forums/topic/20112-gsap-angular/
+scrollmagic
https://github.com/janpaepke/ScrollMagic/issues/700
Get Started https://greensock.com/get-started/#loading-gsap
基本概念
TweenMax.to("#logo", 1, {x:100});
target, duration, vars
CSS Plugin
CSS Plugin 好處：
正規化屬性行為，減少跨瀏覽器的bug與不一致性
優化性能，關於一些layer的表現
控制2d 3d transform
控制屬性無需賦予初始值
甚至可於複雜屬性動畫化 borderRadius, boxShadow .. etc
必要時可加入多瀏覽器前綴 prefix
動畫化 css 變數
支援多種色彩格式 rgb, rgba, hsl, hsla, hex
使svg 與 一般dom 元素的變數操作動畫表現一致，（特別是 transform）
Even lots more
簡單來說，他解決了你很多頭痛的問題
2D and 3D transforms 比較
CSSPlugin recognizes a number of short codes for transform-related properties:
而在使用Css Plugin 有幾個需要注意之處
請使用 Camel命名法 取代所有使用 “-” 的屬性值，像是 font-size -> fontSize 。
盡量別使用 left, top等值操作動畫，
對於渲染來說 x, y 是相對容易的。而如果真的需要使用，必須加上 css position value 像是 absolute, relative or fixed.vw vh 目前不支援，但可以很簡單的以原生 js做到：x: window.innerWidth * (50 / 100) == 50 vw
TweenMax & TimelineMax 皆內建了Css Plugin。
特別保留屬性
有些屬性是GSAP特別專屬的
delay：
delay: 3 ->為該動畫在3秒後才會觸發
onComplete：
onUpdate：
ease：
Easing
官網有強大的 Easing Visual Tool
https://greensock.com/get-started/#easing
code
TweenMax.to("#logo", 1, {x:300, ease:Bounce.easeOut});
Callbacks
onComplete: 每次動畫完成後皆會觸發
onStart: called when the animation begins
onUpdate: 每次動畫更新或渲染時會觸發 (on every frame while the animation is active).
onRepeat: called each time the animation repeats (only available in TweenMax and TimelineMax).
onReverseComplete: called when the animation has reached its beginning again when reversed.
還有這種
onCompleteParams:["done!"]，有點像是fetch儲存string，onComplete執行function觸發的引入文字
code
TweenMax.to("#logo", 1, {x:100, onComplete:tweenComplete, onCompleteParams:["done!"]});
function tweenComplete(message) {
console.log(message);
}
相當於
tweenComplete(onCompleteParams);
可取得狀態值，或是直接觸發 function
code
TweenMax.to("#logo", 1 {x:100, onComplete:tweenComplete});
function tweenComplete() {
console.log("the tween is complete");
}
時間控制
.to()
.from()
.fromTo() ：
ex.
TweenMax.fromTo("#logo", 1.5, {width:0, height:0}, {width:100, height:200});
TweenMax.fromTo( target, duration, fromObject, currentObject)
.staggerTo()
.staggerFrom()
.staggerFromTo()
固定間隔的動畫
Controlling Animating
控制動畫之前，你需要上述時間控制的參數
to(), from(), and fromTo()
code
//create a reference to the animation
var tween = TweenMax.to("#logo", 1 {x:100});
//play 播放。如果在reverse()期間觸發，則直接轉為正向播放
tween.play();
//pause 暫停
tween.pause();
//resume (honors direction - reversed or not) 繼續
tween.resume();
//reverse (always goes back towards the beginning) 倒轉
tween.reverse();
//jump to exactly 0.5 seconds into the tween 跳轉秒數
tween.seek(0.5);
//jump to exacty 1/4th into the tween's progress: 跳轉%
tween.progress(0.25);
//make the tween go half-speed 播放速度1/2x
tween.timeScale(0.5);
//make the tween go double-speed 播放速度 2x
tween.timeScale(2);
//immediately kill the tween and make it eligible for garbage collection 直接移除所有tween
tween.kill();
Timeline技巧
當動畫超過一定時間或是更加龐大後
模組化你的動畫code
https://css-tricks.com/writing-smarter-animation-code/
加入時間序列做法
TimelineMax 中有個很好用的作法，使用 add or to 加入Timeline的variable。如果有多項動畫變量，則會依序執行，省去了使用callback或是其他麻煩方式。
code
//create a timeline instance
var tl = new TimelineMax();
//the following two lines do the SAME thing:
tl.add( TweenMax.to("#id", 2, {x:100}) );
tl.to("#id", 2, {x:100}); //shorter syntax!
=======
Method Chaining
如同依序加入，chaining 也是同樣方式，但是更加簡單清楚有效率，就是一次將所有tween加入，也同樣有依序地效果。
code
var tl = new TimelineMax();
//chain all to() methods together on one line
tl.to(".green", 1, {x:200}).to(".orange", 1, {x:200, scale:0.2}).to(".grey", 1, {x:200, scale:2, y:20});
//we recommend breaking each to() onto its own line for legibility
tl.to(".green", 1, {x:200})
.to(".orange", 1, {x:200, scale:0.2})
.to(".grey", 1, {x:200, scale:2, y:20});
=======
進階 Timeline 技巧
延遲屬性
在前面3個屬性之後，第4個屬性即為時間控制屬性
"+=1" : 前一個動畫結束後1秒開始播放
"-=0.5" : 與前一個動畫重疊0.5秒，即是提前0.5秒播放
6 : 如果沒有括弧，只有數字即為從整個tween開始算起，6秒後開始播放。
code
tl.to(element, 1, {x:200})
//1 second after end of timeline (gap)
.to(element, 1, {y:200}, "+=1")
//0.5 seconds before end of timeline (overlap)
.to(element, 1, {rotation:360}, "-=0.5")
//at exactly 6 seconds from the beginning of the timeline (absolute)
.to(element, 1, {scale:4}, 6);
======
add label 同時播放
code
//create a TimelineMax and make it repeat 3 times with 1 second between iterations
var tl = new TimelineMax({repeat:3, repeatDelay:1});
tl.to(".green", 1, {x:200})
//start 1 second after previous tween ends (gap)
.to(".orange", 1, {x:200, scale:0.2}, "+=1")
//add a label at the end
.addLabel("greyAndPink")
//start both of these animations at the same time, at the "greyAndPink" label.
.to(".grey", 1, {x:200, scale:2, y:20}, "greyAndPink")
.to(".pink", 1, {x:200, rotation:360}, "greyAndPink");
=======
Timeline 時間控制
控制方式與 Tween 相同
以下是較為特殊之屬性
repeat: 重複播放次數
repeatDelay: 重複播放之間隔延遲（秒）
yoyo: if true，動畫重複播放將會正播、倒轉交替。
delay: 在整個 Timeline 動畫開始之前的延遲（秒）。
onComplete: 動畫完成後執行的 function
=======
4種時間軸 getter / setter 控制方式，基本上都是以“秒”為單位
time()：經過時間
progress()：0為開始，0.5為一半，1為結束
duration()：動畫持續時間
delay()：延遲
TimelineMax
add()
addLabel()
addPause()
call()
clear()
delay()
duration()
eventCallback
exportRoot()
from()
fromTo()
getChildren()
getLabelTime()
getTweensOf()
invalidate()
isActive()
kill()
pause() : 暫停動畫
paused()：boolean 回傳是否為暫停狀態
play()：播放動畫
progress()
remove()
removeLabel()
render()
restart()：重新開始動畫
resume()
reverse()：倒轉動畫
reversed()：boolean 回傳是否已為倒轉狀態，執行倒轉動畫後值為 true，代表已倒轉。
true -> 正轉 -> false -> 倒轉 -> true。
所以初始值需為 true 第一次動畫才會正常執行。
seek()
set()
shiftChildren()
staggerFrom()
staggerFromTo()
staggerTo()
startTime()
time()
timeScale()
to()
totalDuration()
totalProgress()
totalTime()
useFrames()
Methods exclusive to TimelineMax
currentLabel()
getActive()
getLabelAfter()
getLabelBefore()
getlLabelsArray()
repeat()： -1 為 Infinite
repeatDelay()：repeat 間隔
tweenFromTo()
tweenTo()
yoyo()
TweenMax
delay()
delayedCall()
duration()
eventCallback
from()
fromTo()
getTweensOf()
invalidate()
isActive()
kill()
killDelayedCallsTo()
killTweensOf()
pause()
paused()
play()
progress()
restart()
resume()
reverse()
reversed()
seek()
set()
startTime()
time()
timeScale()
to()
totalDuration()
totalProgress()
totalTime()
Methods exclusive to TweenMax
getAllTweens()
isTweening()
killAll()
killChildTweensOf()
pauseAll()
repeat()
repeatDelay()
resumeAll()
staggerFrom()
staggerFromTo()
staggerTo()
updateTo()
yoyo()
張貼留言