---
tags: Gsap
---
###### tags: `gsap`
# GSAP3 Plugins - ScrollTrigger
載入 gsap主程式 js 和 引用 ScrollTrigger 外掛程式 js

<script src="gsap.min.js"></script>
<script src="ScrollTrigger.min.js"></script>

> **除了需要引入 JavaScript 資源外，<font style="background-color: red; color: #fff;">還需要在 JavaScript 中註冊外掛</font>**
> gsap.registerPlugin(ScrollTrigger);
> 若有多個只需要一次註冊多個插件
> gsap.registerPlugin(MotionPathPlugin, ScrollTrigger, MorphSVGPlugin);
- 屬性使用方法

gsap.registerPlugin(ScrollTrigger);

gsap.to("動畫執行物件選擇器", {
  scrollTrigger: "觸發目標選擇器",
  x: 300,
});

<iframe height="265" style="width: 100%;" scrolling="no" title="ScrollTrigger-1" src="https://codepen.io/juest/embed/ZEpwEQo?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/juest/pen/ZEpwEQo'>ScrollTrigger-1</a> by gt.juest
(<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

---
- 物件使用方法

gsap.registerPlugin(ScrollTrigger);

gsap.to( "動畫執行物件選擇器",{
  scrollTrigger: {
    trigger: "觸發目標選擇器",
  }
});

## {物件參數}

scrollTrigger: {
  trigger: ".selector", // 觸發目標選擇器或元素
  start: "top center",  // [觸發目標] [捲軸] 定位點
  end: "20px 80%", // [觸發目標] [捲軸] 定位點
  scrub: true, // or time (in seconds) to delay
  pin: true, // or selector or element to pin
  markers: true, // 顯示標記觸發點
  toggleActions: "play pause resume reset",
  // other actions: complete reverse none
  toggleClass: "active",
  id: "my-id",
  anticipatePin: 1, // can help avoid flash
  snap: 1 / 10, // progress increment
  pinReparent: true, // moves to documentElement during pin
  once: true,
  endTrigger: ".selector", // selector or element
  horizontal: true, // switches mode
  onEnter: callback
  invalidateOnRefresh: true, // clears start values on refresh
  // other callbacks: 
  // onLeave, onEnterBack, onLeaveBack, onUpdate,
  // onToggle, onRefresh, onRefreshInit, onScrubComplete
}