ScrollTrigger 基本使用

使用 ScrollTrigger 套件來做一個簡單的滾動動畫。
ScrollTrigger 需要在 gsap.to 裡面使用屬性 scrollTrigger，參數則是用來設定觸發的條件。

  • trigger：觸發的元素，當滾動到這個元素時就會觸發動畫。
  • start：觸發的開始位置，也就是當滾動到 trigger 元素的 start 時，就會觸發動畫。
  • end：觸發的結束位置，也就是當滾動到 trigger 元素的 end 時，就會結束動畫。
  • scrub：是否要啟用滾動動畫，設定為 true，則會在滾動時，動畫會跟著滾動，設定為 false，則會在滾動到 end 時，才會觸發動畫。
  • pin：指定觸發元素，當滾動時會跟著動畫浮動置於中間，這會使得效果的外圍區塊增加長度。
  • markers：當設定為 true 時在滾動作用的區塊上，加上標記來查看 strat 與 end 的範圍，當正式上線或不用時設定 false 或是註解來就可以了。

範例說明

面滾動到 #box2 的區塊時， #text2 就會從 opacity: 0 變成 opacity: 1 (由全透變無透)。

#box2 在畫面生成時，先以 set() 方法以 opacity: 0 設成全透。
如果沒有要讓 JS 在畫面生成時以 set() 方式設定，在 HTML 或 CSS 規劃上就需要先處理。

start 與 end 可賦值，動畫過短短的由 trigger 的 top 至 bottom 在讀者還沒仔細觀覽隨即播完，於 end 可使用類似 +=2000 這種數字延長該 trigger 之長度。

See the Pen
GSAP – 45 by Jimmy_Wu (@Jimmy_Wu)
on CodePen.light

資料來源：
(17)前端好好玩用 GSAP 做一個特效 – ScrollTrigger