前端常用动画库：GSAP、Lottie、Swiper 与 AOS 实战指南 | 极客日志

JavaScript大前端

前端常用动画库：GSAP、Lottie、Swiper 与 AOS 实战指南

介绍前端开发中常用的动画库 GSAP、AOS、Lottie 和 Swiper。涵盖 GSAP 的 ScrollTrigger 滚动触发与 SplitText 文字分割用法，AOS 的初始化配置，Lottie 的 JSON 加载与播放控制，以及 Swiper 的轮播图基础与 3D 效果实现。提供完整的 CDN 引入方式及核心代码示例，帮助开发者快速实现页面动效。

佛系玩家发布于 2026/2/6更新于 2026/4/182 浏览

GSAP 的 ScrollTrigger 和 SplitText 动画

GSAP Resources:

GSAP Demo

CDN 引入:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/SplitText.min.js"></script>

ScrollTrigger 部分用法

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
  trigger: '.pic', // 用选择器选择触发元素
  start: 'top top', // 元素到达视口的最上方开始
  // start: 'top 80%', // 元素到达视口的 80% 开始
  end: '+=2000', // 往下移动 2000px 结束
  : , 
  : , 
  : , 
  : , 
  : gsap.() 
    .(, { :  }, { :  }, )
    .(, { :  }, { :  }, ) 
});

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

属性	取值	说明
start	数字/方位名词	触发位置
end	数字/方位名词	结束位置
trigger	Element	触发元素
animation	Tween/Timeline	动画对象
scrub	布尔值/数字	是否绑定滚动条
toggleClass	字符串	切换类名
markers	true/false	开启标注功能
scroller	Element	滚动容器
pin	Element	固定元素
direction	数字	滚动方向 (1 向前，-1 向后)
isActive	布尔值	是否在触发范围内
horizontal	布尔型	是否水平滚动
progress	数字	进度 (0-1)

gsap.registerPlugin(SplitText, ScrollTrigger); // 注册插件
document.fonts.ready.then(() => {
  gsap.set(".split", { opacity: 1 }); // 快速设置所有 .split 元素的初始透明度为 1
  const splitElements = document.querySelectorAll(".split"); // 获取页面中所有带有 .split 类的 DOM 元素
  splitElements.forEach((element) => {
    SplitText.create(element, {
      type: "words,lines", // 拆分类型：同时拆分为「单词」和「行」
      mask: "lines", // 以「行」为掩码（限制），保证拆分后的单词不会超出所在行的范围
      onSplit: (self) => {
        // 文字拆分完成后的回调函数（关键）
        // 拆分完成后，为所有拆分出的单词创建动画
        gsap.from(self.words, {
          duration: 1.3, // 动画持续时间：1.3 秒
          y: 50, // 初始位置：在目标位置下方 50px 处（y 轴正方向为向下）
          opacity: 0, // 初始透明度：完全透明
          stagger: {
            amount: 0.6 // 所有单词完成动画的总延迟时间：0.6 秒（平均分配给每个单词）
          },
          scrollTrigger: {
            trigger: element, // 滚动触发的目标元素：当前遍历的 .split 元素
            start: "top 88%", // 动画开始触发时机：元素的「顶部」与视口的「88% 高度位置」重合时
            end: "top 20%" // 动画结束时机：元素的「顶部」与视口的「20% 高度位置」重合时
          }
        });
      }
    });
  });
});

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

AOS.init({
  offset: 120, // 提前 120px 触发动画
  delay: 0, // 无默认延迟
  duration: 400, // 动画默认持续 400ms
  easing: 'ease', // 默认缓动曲线
  once: false, // 支持重复触发动画
  mirror: false, // 滚动离开不执行反向动画
  anchorPlacement: 'top-bottom' // 元素顶部对齐视口底部时触发
});

<!-- 直接在对应元素添加对应的类名即可，类名对应动画参考官方文档 -->
<div data-aos="fade-up">内容</div>

<script src="https://unpkg.com/[email protected]/build/player/lottie.min.js"></script>

<div id="structure_one_container"></div> // 自定义容器选择器名，设置显示动画的容器

// 获取显示动画的容器
const structure_one_container = document.getElementById('structure_one_container');
// 加载并渲染动画
const structure_one_animation = lottie.loadAnimation({
  container: structure_one_container, // 动画挂载的 DOM 容器（必填）
  renderer: 'svg', // 渲染模式（支持 'svg'/'canvas'/'html'）
  loop: false, // 是否循环播放（布尔值/数字，数字表示循环次数）
  autoplay: false, // 是否自动播放（布尔值）
  path: 'structe_one.json' // Lottie 动画 JSON 文件路径（相对/绝对）
});

// 监听页面滚动，滚动到目标区域时播放动画
window.addEventListener('scroll', () => {
  const rect = structure_one_container.getBoundingClientRect(); // 关键是获取放置容器的元素的矩形属性
  // 当动画容器进入视口（顶部 <= 窗口高度）时播放
  if (rect.top <= window.innerHeight / 1.5 && !structure_one_animation.isPlaying) {
    structure_one_animation.play(); // 播放动画
  }
});

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />

<div class="swiper course-slider">
  <div class="swiper-wrapper">
    <!-- 轮播卡片 -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- 分页器-->
  <div class="swiper-pagination"></div>
  <!-- 上下按钮-->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <!-- 滚动条 -->
  <div class="swiper-scrollbar"></div>
</div>

.swiper-pagination-bullet-active {
  background-color: #00E77F; /* 选中的小圆点背景色：青绿色 */
}
.swiper-pagination-bullet {
  background-color: #fff; /* 未选中的小圆点背景色：白色 */
}

var swiper = new Swiper(".course-slider", {
  spaceBetween: 20, // 轮播卡片之间的间距：20px
  grabCursor: true, // 鼠标交互：光标移到轮播上时变成'抓手样式'
  loop: true, // 循环轮播
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },
  breakpoints: {
    540: { slidesPerView: 1 },
    768: { slidesPerView: 2 },
    1024: { slidesPerView: 3 }
  }
});

var swiper = new Swiper(".home-slider", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 100,
    modifier: 2,
    slideShadows: true
  },
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false
  }
});

let lastActiveIndex = swiper2.activeIndex;
swiper2.on('slideChange', function() {
  var activeIndex = swiper2.activeIndex;
  var activeSlide = swiper2.slides[activeIndex];
  var currentImage = activeSlide.querySelector('img');
  let num = currentImage.id;
  var current = document.getElementsByClassName("spc")[num - 1];
  
  // 左滑动并清空上一个
  if (num - 2 >= 0 && activeIndex > lastActiveIndex) {
    var prev = document.getElementsByClassName("spc")[num - 2];
    prev.style.color = "black";
    prev.style.backgroundColor = "white";
  } else {
    var prev = document.getElementsByClassName("spc")[5];
    prev.style.color = "black";
    prev.style.backgroundColor = "white";
  }
  
  // 右滑动并清空上一个
  if (num != 6 && activeIndex < lastActiveIndex) {
    var prev = document.getElementsByClassName("spc")[num];
    prev.style.color = "black";
    prev.style.backgroundColor = "white";
  } else {
    var prev = document.getElementsByClassName("spc")[0];
    prev.style.color = "black";
    prev.style.backgroundColor = "white";
  }
  
  current.style.color = "white";
  current.style.backgroundColor = "black";
  lastActiveIndex = activeIndex;
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

let num_s = 0;
sound.onclick = () => {
  num_s += 1;
  if (num_s % 2 == 0) {
    sound_icon.classList.remove('fa-volume-xmark');
    sound_icon.classList.add('fa-volume-high');
    video.muted = false;
    sbar.style.width = (video.volume * 100) + "%";
  } else {
    sound_icon.classList.remove('fa-volume-high');
    sound_icon.classList.add('fa-volume-xmark');
    video.muted = true;
    sbar.style.width = 0 + "%";
  }
};

前端常用动画库：GSAP、Lottie、Swiper 与 AOS 实战指南

GSAP 的 ScrollTrigger 和 SplitText 动画

ScrollTrigger 部分用法

更多推荐文章

相关免费在线工具

常用属性

SplitText 文字分割动画

AOS 动画

JS 代码

HTML 代码（AOS 使用方法）

Lottie 动画

HTML 代码

JS 代码

Swiper 轮播图

HTML 代码（类名要正确）

CSS 代码控制分页器

JS 代码

Font Awesome 图标字体工具

前端常用动画库：GSAP、Lottie、Swiper 与 AOS 实战指南

GSAP 的 ScrollTrigger 和 SplitText 动画

ScrollTrigger 部分用法

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

常用属性

SplitText 文字分割动画

AOS 动画

JS 代码

HTML 代码（AOS 使用方法）

Lottie 动画

HTML 代码

JS 代码

Swiper 轮播图

HTML 代码（类名要正确）

CSS 代码控制分页器

JS 代码

Font Awesome 图标字体工具