如何实现GSAP鼠标滚动特效教程二？

本文共计1688个文字，预计阅读时间需要7分钟。

动画插件导入，使用GSAP和ScrollTrigger，注册插件后，动画开始时，box5进入视图，box2滚动触发动画。

动画插件

import { ScrollTrigger } from "gsap/ScrollTrigger"; import {gsap, Expo} from 'gsap'; gsap.registerPlugin(ScrollTrigger); 动画开始时, box5进入(第一次进入)视口

gsap.to(".box2", { scrollTrigger: ".box5", //当出现这个dom的时候, .box2 会向x移动500px, 类似于一个触发器 x: 500 }); 添加时间线

let t1 = gsap.timeline({ scrollTrigger: { trigger: ".box5", }, }); t1.to('.box4', {x: 100, duration: 1}) start 滚动条移动的距离 number

scrollTrigger: { start:100// 滚动条移动的100px时候触发 }, string

scrollTrigger: { trigger: ".box11", start: "center bottom",// 在.box11 中间的位置开始滚动 // 标记设置 markers: true, scrub: true, }, 'top top' 当盒子移动到视口顶部的位置开始执行 'top center' 这个表示当盒子移动到视口中间的位置开始执行

.box11为触发器的盒子,

start是触发滚动动画开始的位置,两个绿色的标记线

• 第一个参数, 默认指定dom的0%也就是top
• 第二个参数, 默认滚条的100% 也就是bottom

end是触发滚动动画结束的位置, 两个红色的标记线

• 第一个参数, 默认指定dom的100% 也就是bottom
• 第二个参数, 默认滚动条的0% 也就是top

滚动条的意思, 不是移动的距离, 而且当前页面100%的长度,打个刻度, 跟dom 对应的重合到一起

介绍了滚动条刻度的规则, start 的刻度要大于end的刻度

scrub 跟start 配合起来

可以滚动形成滚来滚去

gsap.registerPlugin(ScrollTrigger); let t1 = gsap.timeline({ scrollTrigger: { trigger: ".box11", scrub: true, markers: true }, }); t1.to(".box5", {x: 350})

let t1 = gsap.timeline({ scrollTrigger: { trigger: ".box11", start: "center bottom", end: "bottom center", scrub: true, markers: true }, });

滚动条从center-bottom 开始动画, 从bottom-center 结束动画

markers 标注设置

markers:true 或者对象的形式 /*标注样式设置*/ markers:{ /*开始的颜色*/ startColor:'#2e00f8', /*结束的颜色*/ endColor:'#00d9ff', /*字体大小*/ fontSize:'40px', /*距离一侧的位置*/ indent:20, } 秒一样源码中的默认设置 _markerDefaults = { startColor: "green", endColor: "red", indent: 0, fontSize: "16px", fontWeight: "normal" } 写法案例

gsap.to('.box4', { x: 500, rotation: 360, scrollTrigger: { trigger: '.box4', scrub: true, markers: true, end:'0% 40%' // start end 根据根据markers 显示的刻度进行调整 } })

第二种写法

const anim = gsap.to(".c", { x: 400, rotation: 360, duration: 3 }); ScrollTrigger.create({ trigger: ".box5",// 当.box5 出现时候触发 animation: anim }); 切换动作 toggleActions

toggleActions: "play pause resume reset"

进入时会播放(play)动画，离开时会暂停(pause)，再次向后进入时会继续播放(resume),,,,,,,,,,,,, 当一直滚动回到起点是重置(reset)

可以使用的关键词

“play”、“pause”、“resume”、“reset”、“restart”、“complete”、“reverse”和“none”

ScrollTrigger.defaults({ toggleActions: "play pause resume reset" // 进入时,播放,离开时暂停,再次进入继续播放,直到最后重置 }); gsap.to(".box5", { scrollTrigger: ".box5", duration: 4, rotation: 360 }); cssPlugin

在cssPlugin 的帮助下, gsap 可以机会任何css相关的dom元素设置属性

gsap.to('.box',{ duration:4, rotation:180, scaleX:.2 }) 进度条

gsap.from(".line", { scrollTrigger: { trigger: ".line", scrub: true, start: "top bottom", end: "top top", markers: true, }, scaleX: 0, transformOrigin: "left center", // 移动的圆点从长度: left, 高度: 中 ease: "none" // 去掉默认的速度函数 });

<div class="line"></div> .line{ width: 100%; max-width: 800px; height: 8px; margin: 0 0 10px 0; position: relative; display: inline-block; background-color: rgb(200, 130, 130); }

gsap.from(".line2", { scrollTrigger: { trigger: ".box2", scrub: true, pin: true,// 在.box2的外层的盒子加个盒子`.pin-spacer` start: "top top", end: "+=100%", // 因为直接有个参数, 所以滚动条的开始标记和结束标记都是top markers: true, }, scaleX: 0, transformOrigin: "left center", ease: "none" });

<div style="height: 100vh;background-color: lightpink;" class="box2"> <div class="line2"></div> </div>

主要的设计师end:"+=100%"

进度条3

var tl = gsap.timeline({ scrollTrigger: { trigger: ".purple", scrub: true, pin: true, start: "top top", end: "+=100%" } }); tl.from(".purple p", {scale: 0.3, rotation:45, autoAlpha: 0, ease: "power2"}) // autoAlpha:0 淡入淡出 0 隐藏 , visibility:hidden .from(".line3", {scaleX: 0, transformOrigin: "left center", ease: "none"}, 0) .to(".purple", {backgroundColor: "#28a92b"}, 0); # 滚动特效4

当ScrollTrigger激活时，你可以固定一个元素，这样当滚动位置在开始和结束元素/值之间时，它就会固定在原地

pin

pin:true 就是自身元素

pin:'.xxx' 就是指定的元素

起到的作用是, 滚动固定的作用

ScrollTrigger.create({ trigger: "#orange", start: "top top", end: "bottom 150px", // 150px滚动条的长度 pin: "#orange-content",// 就也是固定的内容的部分 markers:true });

ScrollTrigger.create({ trigger: "#red", start: "top center", end: "+=200", // 超过开始200px pin: "#red-content", markers:true }); 滚动5,滚动执行的函数

• onEnter - 向前越过“start”(通常在触发器滚动到视图时)

• onLeave - f向前越过"end"(通常在触发器滚动出视图时)

• onEnterBack - 向后过去“end”(通常当触发器滚动回视图时)

• onLeaveBack -向后过“start”(通常当触发器向后淡出视图时)

• onUpdate - 每次滚动位置变化，而在“开始”和“结束”之间。

• onToggle - 在任意方向传递开始或结束

• onRefreshInit -在测量值重新计算之前(通常在调整大小时)

• onRefresh -在重新计算测量值之后(通常在调整大小时)

  const animation = gsap.from(".line-1", { scaleX: 0, transformOrigin: "left center", ease: "none" }); const logRed = (text: any, e: any = 1) => { console.log(text, e); } ScrollTrigger.create({ trigger: ".red", start: "top 100px", end: "bottom bottom-=100px", // 滚动条刻度100px开始, 滚动条-100px的位置结束 markers: true, scrub: true, animation: animation, onEnter: () => logRed("越过start这根线"), onLeave: () => logRed("越过end这根线"), onEnterBack: () => logRed("返回越过end这根线"), onLeaveBack: () => logRed("返回越过start这根线"), onRefresh: (e: any) => logRed("默认执行两次", e), // onUpdate: self => redProgress.innerText = "progress: " + self.progress.toFixed(3) onUpdate: (self: any) => { // 更新的值 console.log(self); console.log(self.progress.toFixed(3)); } });

决定自己的高度的是你的态度，而不是你的才能 记得我们是终身初学者和学习者

总有一天我也能成为大佬