gsap(二) 鼠标滚动特效第一篇

动画插件

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));
        }
      });