综合 ScrollTrigger插件支持创建各种JavaScript可操作内容的动画

2024-11-18 17:15:54 +0800 CST views 764

GreenSock动画平台（GSAP）是一款高效的动画库，支持创建各种JavaScript可操作内容的动画。ScrollTrigger插件基于GSAP，专注于页面滚动时的动画触发，提供丰富的功能和灵活的控制。通过简单的代码，用户可以实现复杂的滚动交互，提升页面体验。GSAP和ScrollTrigger被广泛应用于众多网站，具有极高的性能和兼容性。

GSAP 简介

GreenSock 动画平台（GSAP） 是一款强大的动画库，可以为任何 JavaScript 可操作的内容（如 CSS 属性、SVG、React、Canvas 等）创建高效的动画，同时解决不同浏览器的兼容性问题。GSAP 比 jQuery 快 20 倍，被广泛应用于大约 1000 万个网站，包括许多知名品牌。

ScrollTrigger 插件简介

ScrollTrigger 是基于 GSAP 实现的高性能插件，用于触发页面滚动时 HTML 元素的动画。通过最少的代码创建令人惊叹的滚动动画。ScrollTrigger 依赖 GSAP 处理动画，因此二者需要结合使用才能实现滚动动画。

插件特点

将动画链接到特定元素，使其仅在滚动到视图中时执行。
在进入/离开定义的区域时控制动画播放、暂停、反转等。
同步滚动条与动画之间的进度。
高级的固定功能，可锁定元素在某些滚动位置间。
支持垂直和水平滚动，支持自定义滚动容器。
高度优化以实现最大性能，插件仅有 6.5kb 大小。
通过丰富的回调系统实现灵活的动画控制。

安装方式

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

ES Modules

import { gsap } from "gsap";  
import { ScrollTrigger } from "gsap/ScrollTrigger";  
gsap.registerPlugin(ScrollTrigger);

UMD/CommonJS

import { gsap } from "gsap/dist/gsap";  
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";  
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger 使用示例

简单示例

gsap.to(".box", {  
  scrollTrigger: ".box", // 当 .box 进入视口时触发动画
  x: 500  
});

高级示例

let tl = gsap.timeline({  
    scrollTrigger: {  
      trigger: ".container",  
      pin: true, // 固定触发器元素
      start: "top top", // 当触发器的顶部与视口顶部对齐时开始
      end: "+=500", // 滚动 500px 后结束
      scrub: 1, // 动画随滚动条滚动
      snap: {  
        snapTo: "labels", // 捕捉到时间线中最近的标签
        duration: {min: 0.2, max: 3}, // 捕捉动画最短 0.2 秒，最长 3 秒
        delay: 0.2, // 滚动事件结束 0.2 秒后开始捕捉
        ease: "power1.inOut" // 捕捉动画的过渡效果
      }  
    }  
});  

// 添加动画和标签到时间线
tl.addLabel("start")  
  .from(".box p", {scale: 0.3, rotation: 45, autoAlpha: 0})  
  .addLabel("color")  
  .from(".box", {backgroundColor: "#28a92b"})  
  .addLabel("spin")  
  .to(".box", {rotation: 360})  
  .addLabel("end");

自定义示例

ScrollTrigger.create({  
  trigger: "#id",  
  start: "top top",  
  endTrigger: "#otherID",  
  end: "bottom 50%+=100px",  
  onToggle: self => console.log("toggled, isActive:", self.isActive),  
  onUpdate: self => {  
    console.log("progress:", self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity());  
  }  
});

效果演示

使用 ScrollTrigger 可以实现许多动态效果，如滚动时触发动画、固定元素、触发回调等。通过少量代码即可实现复杂的滚动交互，提升页面用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Complex GSAP ScrollTrigger Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      height: 300vh; /* 增加页面高度以实现滚动效果 */
    }

    section {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: white;
    }

    /* 每个区域不同颜色 */
    #section1 {
      background-color: #1abc9c;
    }

    #section2 {
      background-color: #3498db;
      position: relative;
    }

    #section3 {
      background-color: #e74c3c;
    }

    .box {
      width: 150px;
      height: 150px;
      background-color: #2ecc71;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      font-size: 20px;
      color: white;
      font-weight: bold;
    }

    /* 为了固定演示 */
    .sticky {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #f39c12;
      width: 200px;
      height: 200px;
      border-radius: 10px;
    }
  </style>
</head>
<body>

  <section id="section1">
    <div class="box">滚动触发</div>
  </section>

  <section id="section2">
    <div class="sticky">固定元素</div>
  </section>

  <section id="section3">
    <div class="box">结束动画</div>
  </section>

  <!-- GSAP 和 ScrollTrigger 插件的 CDN 引入 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

  <script>
    // 注册 ScrollTrigger 插件
    gsap.registerPlugin(ScrollTrigger);

    // Box 元素在滚动时触发动画
    gsap.from(".box", {
      scrollTrigger: {
        trigger: "#section1",  // 触发动画的元素
        start: "top center",   // 当 #section1 的顶部到达视口中心时触发
        end: "bottom 20%",     // 当 #section1 的底部到达视口的 20% 时结束
        scrub: true,           // 随滚动条滚动
        markers: true          // 显示触发点标记
      },
      scale: 0.3,              // 缩放动画
      rotation: 360,           // 旋转动画
      duration: 3
    });

    // Sticky 元素在滚动时固定
    gsap.to(".sticky", {
      scrollTrigger: {
        trigger: "#section2",   // 触发器为 #section2
        start: "top top",       // 当 #section2 的顶部与视口顶部对齐时开始
        end: "+=300",           // 滚动 300px 后结束
        pin: true,              // 固定元素在滚动期间
        markers: true
      },
      backgroundColor: "#e74c3c", // 更改背景色
      scale: 1.5                 // 放大元素
    });

    // 第三部分滚动到时执行颜色和大小变化
    gsap.fromTo("#section3 .box", 
      {backgroundColor: "#2ecc71", scale: 0.5}, 
      {
        backgroundColor: "#9b59b6", scale: 1.2,
        scrollTrigger: {
          trigger: "#section3",    // 触发器为 #section3
          start: "top center",     // 当 #section3 到达视口中间时触发
          end: "bottom 80%",       // 当 #section3 的底部到达视口 80% 时结束
          scrub: true,             // 随滚动条同步
          markers: true
        }
      }
    );

    // 监听滚动事件并输出进度信息
    ScrollTrigger.create({
      trigger: "#section3",        // 触发器为 #section3
      start: "top center",
      onUpdate: self => {
        console.log("滚动进度:", self.progress.toFixed(3));
      }
    });
  </script>

</body>
</html>

复制全文生成海报动画前端开发 JavaScript库