---
tags: Gsap
---
###### tags: `gsap`
# GSAP3 Plugins - ScrollTrigger toggleActions
### <font style="color: #f0f">toggleActions: 'play none none none'</font>
默認情況下，目標標籤遇到啟動點時播放，而在其他三個階段中不執行任何操作。

第一個play代表: onEnter - 向下滾動，目標啟動點(綠) 與 視窗捲軸開始(綠)
第二個none代表: onLeave - 向下滾動，目標結束點(紅) 與 視窗捲軸結束(紅)
第三個none代表: onEnterBack - 向上滾動，目標結束點(紅) 與 視窗捲軸結束(紅)
第四個none代表: onLeaveBack - 向上滾動，目標啟動點(綠) 與 視窗捲軸開始(綠)

---
下面的參數就是可以替換上面4個 'play none none none'
#### <font style="color: #f00">“play”, “pause”, “resume”, “reset”, “restart”, “complete”, “reverse”, and “none”.</font>
“播放”, “暫停”, “恢復”, “重置”, “重新開始”, “完成”, “反向”, 和 “無”。

---
'play none reverse none' 捲下播放捲上返回 (start => scroll start 和 end => scroll end)
'play none none reverse' 捲下播放捲到最上再返回 (start => scroll start 和 start => scroll start)

---
### 加入 makers 便利 偵測起動和結束點
#### <font style="color: #f0f">markers: { start: '20px 80%', end: 'bottom 300px' }</font>

在右邊參考線 markers 的參數說明

start: '20px 80%', // 啟動點 20px為目標物的頂點20px 80%為視窗捲軸由上往下算的80%
end: 'bottom 300px', // 結束點 bottom目標物的底端bottom 300px為視窗捲軸由上往下算的300px
end: '+=300', //結束點 為啟動點捲動到300px的點
end: () => '+=' + document.querySelector('.c').offsetHeight, //結束點 利用函數選取物件的高為數值