(1) Gsap- scrollTrigger

發表於 更新於 分類於
介紹 Gsap- scrollTrigger 套件

安裝套件

在官網安裝頁面，勾選 scrollTrigger 套件

即可複製 scrollTrigger cdn

1
2
3
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

設定 scrollTrigger

1
2
3
4
5
6
7
8
9
// 載入 ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

// 卷軸滾到 blueBox 才觸發動畫
gsap.to(blueBox, {
  x: 500,
  duration: 2,
  scrollTrigger: blueBox,
});