强大的动画库,包括5大工具类:
更多信息,请访问 官网 - GSAP
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script> // This tween will rotate an element with a class of .my-element gsap.to('.my-element', { rotation: 360, duration: 2, ease: 'bounce.out' }) </script>
gsap.method(targets, vars)
几乎可以使用任何CSS属性,包括 SVG attributes 和 Canvas;使用最多的是变换 transform 和透明 opacity
复合属性请是小驼峰 camelCase,如backgroundColor
可以使用函数定制返回值
.x
.y
.scale
... ...
If you're not sure, give it a try!
recommend sticking to transforms and opacity when possible.
用来控制/设置动画过程
通常写在结束状态中
gsap.to('.span', { scale: 1, opacity: 1, stagger: 0.1, })
gsap. .fromTo('.span', { scale: 0, opacity: 0, }, { scale: 1, opacity: 1, stagger: 0.1, x: () => Math.random() * 1000 })
staggerFromTo 已经不是 GSAP 的标准方法
const tl = gsap.timeline( { repeat: 2, yoyo: true } )
如果不指定位置参数,则依次输出1 end、2 end;指定了 < 后,第2个动画提前和第1个动画同时触发,同时结束,同时输出提示信息
tl .to('.my-element', { x: -300, backgroundColor: '#ff4400', rotation: 180, onComplete: () => console.log('1 end') }) .to('.box', { x: 500, scale: 1.5, opacity: 1, onComplete: () => console.log('2 end') }, '<')
也可以依次调用
tl.to() tl.to()
tl.pause(); setTimeout(() => { tl.play(); }, 5000);
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
gsap.registerPlugin(ScrollTrigger)
gsap.to('.box', { x: 500, scrollTrigger: '.wrap', // start animation when ".wrap" enters the viewport });
定义触发动画的各种条件和行为
3.1 String:使用关键字 top、bottom、left、right 表示触发的位置
表示 trigger 和 scroller 相遇mee的位置
top top:trigger 的顶端到达 scroller 的顶端时,触发动画
top center:trigger 的顶端达到 scroller 的中心时,触发动画
可以使用百分比表示从 scroller 顶端开始的位置
3.2 Number:scroller 的滚动距离/大小;如视口滚动了200;可以使用 window 的 scroll 事件调试
3.3 Function:
String:如果指定了 endTrigger,则使用 endTrigger,否则使用 trigger
Number:
Function:
markers: {startColor: "white", endColor: "white", fontSize: "18px", fontWeight: "bold", indent: 20}
动画会根据滚动的速度实时改变,提供平滑的滚动同步效果,默认是 false
也可以指定数值,表示跟随滚动条变化的时间
大头针效果;是否将触发元素固定在视口的某个位置,默认为 false
如果使用元素a作为 trigger 去触发元素b的动画,则元素a被固定在视口