ScrollTrigger

介绍

ScrollTrigger 它可以帮助你在滚动页面时触发特定的动画或效果。这个插件基于 GSAP（GreenSock Animation Platform）库，因此你可以使用 GSAP 的强大功能来创建复杂的动画。

使用

引用

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

注册

gsap.registerPlugin(ScrollTrigger);

使用

<template>
  <div>
    <div style="width: 100%; height: 1000px; background: blue"></div>
    <div class="box black"></div>

    <div class="box red"></div>

    <div class="box blue"></div>

    <div class="box green"></div>
    <div style="width: 100%; height: 2000px; background: blue"></div>
  </div>
</template>

<script setup>
  /* eslint-disable */
  import gsap from "gsap";
  import { onMounted, ref } from "vue";
  import { ScrollTrigger } from "gsap/ScrollTrigger";
  const gsap1 = () => {
    gsap.registerPlugin(ScrollTrigger);
    const tl = gsap.timeline();
    tl.to(".red", {
      x: 800,
      rotattion: 360,
      // duration: 10,
      scrollTrigger: {
        // 开始触发的节点
        trigger: ".black",
        // 这里是开始触发的位置 // 因为滚动有两种 从下往上 和从上往下
        // 默认应该 scroll-start开始在底部 ,scroll-end 在头部
        // 第一个参数 就是针对black的位置 第二个参数是 针对滚动条的位置
        start: "50 50%",
        // 要是只写一个 滚动条的距离
        //start: 100,
        endTrigger: ".blue",
        end: "bottom 25%",
        //是否把动画连接到滚动条,这样外面写的duration就会失效,默认是false
        scrub: true,
        // 是否把元素固定
        // pin: true,
        markers: {
          startColor: "black",
          endColor: "red",
          fontSize: "20px",
          indent: 200,
        },
        // 往下滚动 进入滚动区域 onEnter 对应 onLeaveBack
        // 当start在scroll-start上部 触发onEnter 当start在scroll-state下面触发onLeaveback
        // 当end在scroll-end上部 触发onLeave 当end在scroll-end下部触发onEnterback
        onEnter: () => {
          console.log("enter");
          tl.play();
        },
        // 往上滚动 离开滚动区域
        onLeaveBack: () => {
          console.log("leaveBack");
          tl.pause();
        },
        // 往上滚动 进入滚动区域 onEnterBack对应onLeave
        onEnterBack: () => {
          console.log("enterBack");
          tl.play();
        },
        // 往下滚动 离开滚动区域
        onLeave: () => {
          console.log("leave");
          tl.pause();
        },
      },
    });
  };

  onMounted(() => {
    gsap1();
    // window.addEventListener("scroll", () => {
    //   console.log(document.documentElement.scrollTop);
    // });
  });
</script>

<style lang="scss" scoped>
  .box {
    width: 100px;
    height: 100px;
    margin-bottom: 150px;
  }
  .red {
    background-color: red;
  }
  .black {
    background-color: black;
  }
  .blue {
    background-color: blue;
  }
  .green {
    background-color: green;
  }
</style>