ScrollTrigger﹙前端好好玩用 GSAP 做一個特效﹚

ScrollTrigger 基本使用

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

gsap.registerPlugin(ScrollTrigger);

gsap.to("#target", {
  scrollTrigger: {
    trigger: "#target",
    start: "top",
    end: "bottom",
    scrub: true,
    markers: true,
  },
});

gsap.registerPlugin(ScrollTrigger);

gsap.to("#target", {

scrollTrigger: {

trigger: "#target",

start: "top",

end: "bottom",

scrub: true,

markers: true,

});

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

範例說明

gsap.registerPlugin(ScrollTrigger);
gsap.set('#text2', { opacity: 0 })
gsap.to("#text2", {
  scrollTrigger: {
    trigger: "#box2",
    start: "top",
    end: "bottom",
    scrub: false,
    pin: true,
    markers: true,
  },
  opacity: 1,
});

gsap.registerPlugin(ScrollTrigger);

gsap.set('#text2', { opacity: 0 })

gsap.to("#text2", {

scrollTrigger: {

trigger: "#box2",

start: "top",

end: "bottom",

scrub: false,

pin: true,

markers: true,

opacity: 1,

});

面滾動到 #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.

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

標籤雲

ScrollTrigger 基本使用

範例說明