gsap plugin
javascript
GSAP
免费版本支持这几个插件(现在都已经免费了):
- ScrollTrigger
- Draggable
- Flip
- MotionPath
- Observer
- Pixi
- ScrollTo
- 滑动到指定元素的区域
- Text
| 插件 | 免费 | Plus | Premium | Business |
|---|---|---|---|---|
| 新功能和错误修复的通知 | x | y | y | y |
| DrawSVG | x | y | y | y |
| Physics2D | x | y | y | y |
| PhysicsProps | x | y | y | y |
| ScrambleText | x | y | y | y |
| CustomBounce | x | y | y | y |
| CustomWiggle | x | y | y | y |
| ScrollSmoother | x | y | y | y |
| MorphSVG | x | y | y | y |
| Inertia | x | y | y | y |
| SplitText | x | y | y | y |
| MotionPathHelper | x | y | y | y |
| GSDevTools | x | y | y | y |
| 商业许可证 | x | y | y | y |
| 提供多开发人员会员资格 | x | y | y | y |
ScrollTrigger
js
1 import gsap from 'gsap';
2 import ScrollTrigger from 'gsap/ScrollTrigger';最简单的用法
text
1gsap.to('.box', {
2 scrollTrigger: '.box', //当.box出现的viewport 中开始动画
3 x: 500
4});对象配置
- markers 开始标记
- trigger 触发的元素
- start 两个参数，第一个参数是元素的位置，第二个参数是视窗的位置。eg: top center,触发元素的 top 和视窗 center 对齐时候开始动画。
- end 两个参数，第一个参数是元素的位置，第二个参数是视窗的位置。eg: bottom top,触发元素的 bottom 和视窗 top 对齐时候结束动画。也可以为表达式 '+=100%' 动画完成才结束
- scrub 平滑，向上滚动时候正向播放动画，向下滚动时候逆向播放动画。
组合用法
text
1let tl = gsap.timeline({
2 // yes, we can add it to an entire timeline!
3 scrollTrigger: {
4 trigger: '.container',
5 pin: true, // 在活动状态下固定触发元素。
6 start: 'top top',
7 end: '+=500',
8 scrub: 1,
9 snap: {
10 snapTo: 'labels', // snap to the closest label in the timeline
11 duration: { min: 0.2, max: 3 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
12 delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
13 ease: 'power1.inOut' // the ease of the snap animation ("power3" by default)
14 }
15 }
16});ScrollToPlugin
text
1 import ScrollToPlugin from 'gsap/ScrollToPlugin';
2
3 gsap.to(window, { duration: 2, scrollTo: '.b', ease: 'power2' });
4ScrollTo
javascript
1gsap.to(window, {
2 duration: 2,
3 scrollTo: { y: 300, autoKill: true, onAutoKill: myAutoKillFunction },
4});
5
6function myAutoKillFunction() {
7 alert("autoKill");
8}Text
javascript
1<h1 id="myText">wait 1 second please</h1>
2gsap.to("#myText", {duration: 2, text: "thank you for waiting", delay: 1});Draggable
javascript
1gsap.registerPlugin(Draggable, InertiaPlugin);
2
3Draggable.create(".flair--1", {
4 type: "x",
5 bounds: ".container"
6});
7
8Draggable.create(".flair--3b", {
9 type: "rotation",
10 inertia: true
11});
12
13Draggable.create(".flair--4b", {
14 bounds: ".container",
15 inertia: true
16});
17