ScrollTrigger

ScrollTrigger

CDN

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

ESM

import { ScrollTrigger } from "gsap/ScrollTrigger";

注册

gsap.registerPlugin(ScrollTrigger)

基本使用

gsap.to('.box', {
	scrollTrigger: '.box', // 当""进入视口时开始动画
	x: 500
});

属性

animation

[只读]，和Tween活Timeline关联的ScrollTrigger实例（如果有）

animation : Tween | Timeline | undefined

ScrollTriggers 不必要与任何animation关联，在这种情况下animation为undefined

let tween = gsap.to(".class", { x: 100 })
let st = ScrollTrigger.create({
    trigger: ".trigger",
    start: "top center",
    end: "+=500",
    animation: tween,
});

console.log(st.animation); // tween

direction

[只读]，可获取滚动的逐时刻方向，其中1向前，-1向后。

direction : Number

ScrollTrigger.create({
  trigger: ".trigger",
  start: "top center",
  end: "+=500",
  onUpdate: (self) => console.log("direction:", self.direction),
});

end

[只读]，ScrollTrigger结束时的滚动位置，单位为px

end : Number

INFO

当ScrollTrigger被刷新时，也就是当window或scroller尺寸改变时，end的值会被重新计算。

例如：如果目标元素在视口下方的100px处（视口之外），并且ScrollTrigger的vars中含有end："top bottom"属性，那么ScrollTrigger的计算结果是100（这意味着它必须滚动100px才能到达终点）。

ScrollTrigger的start和end属性将始终是数值，并以像素为单位反映滚动位置。

isActive

[只读]，只有当滚动的位置在start和end之间，其值才为true

isActive : Boolean

ScrollTrigger.create({
  trigger: ".trigger",
  start: "top center",
  end: "+=500",
  onToggle: (self) => console.log("toggled. active?", self.isActive),
});

ScrollTrigger.isTouch

可辨别设备是否具备触摸的能力（手机、平板之类非鼠标操作）

• 0：仅鼠标/指针
• 1：仅触摸（手机之类）
• 2：以上两种都可以

ScrollTrigger.isTouch : Number

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific:
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

pin

[只读]，将选中的元素在设置的位置范围内固定在视口

pin : Element | undefined

let st = ScrollTrigger.create({
  trigger: ".trigger",
  pin: ".pin",
  start: "top center",
  end: "+=500",
});

console.log(st.pin); // pin element (not selector text)

progress

scroller

start

trigger

vars

方法

disable()

enable()

getTween()

getvelocity()

kill()

labelToScroll()

next()

previous()

refresh()

scroll()

ScrollTrigger.addEventListenerl()

ScrollTrigger.batchl()

ScrollTrigger.clearMatchMedial()

ScrolTrigger.clearScrollMemorl()

ScrollTrigger.configl()

ScrollTrigger.createl()

ScrollTrigger.defaultsl()

ScrollTrigger.getAlIl()

ScrollTrigger.getByld()

ScrollTrigger.islnViewportl()

ScrolTrigger.iScrollingl()

ScrollTrigger.killIlIl()

ScrollTrigger.matchMedial()

ScrollTrigger.maxScrolll()

ScrollTrigger.normalizeScrolll()

ScrollTrigger.observel()

ScrolTrigger.positionlnViewportl()

ScrollTrigger.refreshl()

ScrollTrigger.removeEventListenerl()

ScrollTrigger.saveStylesl()

ScrollTrigger.scrollerProxyl()

ScrollTrigger.snapDirectionall()

ScrollTrigger.sortl()

ScrollTrigger.updatel()