SuperAPI AI 工具集

gsap-scrolltrigger

前端与建站

查看项目

更新于 10-16 06:47

技能介绍

GSAP ScrollTrigger 是 GSAP 的官方插件,用于把动画与页面或容器的滚动位置关联起来,实现滚动驱动体验,例如擦洗(scrub)、钉住元素(pin)、吸附定位(snap)与滚动回调。

安装与注册:npm install gsap,然后 import gsap from 'gsap'、import { ScrollTrigger } from 'gsap/ScrollTrigger',并执行 gsap.registerPlugin(ScrollTrigger)。

主要能力:在 gsap.to/from 的 scrollTrigger 配置中设置 trigger 与 start/end 定义动画区间,scrub 将进度绑定滚动(可加数值平滑),pin 钉住元素并可配 pinSpacing、pin 到不同元素。toggleActions 按进入/离开/回退方向播放、暂停、反转等;回调包括 onEnter、onLeave、onEnterBack、onLeaveBack、onUpdate、onToggle、onScrubComplete、onRefresh。位置语法支持关键词、像素、百分比与相对值。可结合时间线、吸附(snap)、标记(markers)、自定义 scroller、批量处理(ScrollTrigger.batch)及静态/实例方法(refresh、getAll、create、kill、getVelocity 等)。

限制:DOM 变化后需调用 ScrollTrigger.refresh();使用自定义滚动容器时必须指定 scroller;多个 pin 可能相互冲突;过度使用 scrub 影响性能,开发用的 markers 应在生产移除。文中未提供官方收费与授权信息。