Observer是GSAP的套件之一，主要用途為偵測使用者的行為，像是滑鼠滾輪向下、或是用手機向下滑。如果你想要向上滑跟向下滑有不同的結果，那就很適合使用這個外掛。

Observer 的基礎操作

因為是套件所以需要另外呼叫

gsap.registerPlugin(Observer);

呼叫完之後你必須要設定一個想被Observer套用的行為模式

Observer.create({
	target: window,   // 觸發的物件
	type: "wheel,touch",   // 觸發的行為
	onUp: () => previous(),  // 往上滾動執行的函式
	onDown: () => next(),  // 往下滾動執行的函式
	ignore: ".deadzone" // 忽略的區塊
});

你也可以使用回調函式去看參數的變化

Observer.create({
    ...
    onChange: (self) =>  {
        console.log("velocity:", self.velocityX, self.velocityY, "delta:", self.deltaX, self.deltaY, "target element:", self.target, "last event:", self.event);
    }
});

案例研究

gsap也可以做出像輪播圖一格一格的滑動感，只是難度上比一般的輪播圖套件來的難很多，但是他的優勢就是可以用Observer做出往上滑跟往下滑有不同的動畫效果。

animating是用來製造輪播圖效果的參數，當我們正在滑動的時候就不觸發，避免過場動畫亂掉。

因為監聽滑鼠行為的時候操作方向會跟手勢滑動相反(如果你是用Mac可能沒感覺)，如果你想同時監聽兩者行為的話建議加上wheelSpeed: -1。

gotoSection()是當我們滑動時需要改變目前顯示的區塊，往下滑會回上一張所以currentIndex會-1，第二個變數是用來顯示對應的動畫效果。

最後tolerance這參數是防止稍微移動一下就觸發onDown跟onUp，這邊建議給他10~50左右。

Observer.create({
	type: "wheel,touch,pointer",
	wheelSpeed: -1,
	onDown: () => !animating && gotoSection(currentIndex - 1, -1),
	onUp: () => !animating && gotoSection(currentIndex + 1, 1),
	tolerance: 10,
	preventDefault: true
});

常用變數介紹

指令	型別	用途
lockAxis	Boolean	開啟鎖定指定軸的方向的相關參數 (可以參考這個例子會比較清楚是在幹麻的)
tolerance	Number	忍受值，如果設定50代表你的滑鼠要移動超過50px才會做觸發的動作
dragMinimum	Number	拖動忍受值，如果設定50代表你的手要滑動超過50px才會做觸發的動作
ignore	Element | String | Array	無視的區塊
onChange	Function	只要有任何的滾動行為都會觸發函式
onChangeX	Function	只要有任何的左右滾動行為都會觸發函式
onChangeY	Function	只要有任何的上下滾動行為都會觸發函式
onClick	Function	只要有任何的點擊行為都會觸發函式
onDown	Function	只要有滑鼠滾輪向下或手指向下滑都會觸發函式 (如果要向上請加上wheelSpeed: -1)
onLeft	Function	只要有滑鼠滾輪向右或手指向右滑都會觸發函式
onRight	Function	只要有滑鼠滾輪向右或手指向左滑都會觸發函式
onHover	Function	滑鼠移入區塊後觸發函式
onHoverEnd	Function	滑鼠移出區塊後觸發函式
onLockAxis	Function	鎖定指定軸時觸發函式
onPress	Function	按壓拖動時觸發函式
onRelease	Function	按壓並且放開時觸發函式
type	String	想監聽哪些行為，預設是wheel、touch、pointer wheel：滑鼠滾動 scroll：滾動行為 touch：任何裝置的觸碰行為(包含手機跟電腦) pointer：任何除了觸碰行為的行為
target	Element | String	想觸發的區塊，預設是viewport