跳到主要内容 前端常用动画库：GSAP、Lottie、Swiper 与 AOS | 极客日志
JavaScript 大前端
前端常用动画库：GSAP、Lottie、Swiper 与 AOS 四种前端动画库的使用方法与代码示例。包括 GSAP 的 ScrollTrigger 滚动触发与 SplitText 文字分割功能，AOS 的滚动显现效果，Lottie 的 JSON 矢量动画加载与控制，以及 Swiper 的普通与 3D 轮播图实现。内容涵盖 CDN 引入、核心配置项、HTML/CSS/JS 代码结构及关键属性说明，旨在帮助开发者快速集成动画效果提升页面交互体验。
FlinkHero 发布于 2026/4/5 更新于 2026/4/17 GSAP：ScrollTrigger 与 SplitText 动画
官方资源：
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' ,
end : '+=2000' ,
scrub : true ,
微信扫一扫，关注极客日志 微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具 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
markers
true
pin
true
pinSpacing
true
animation
timeline
fromTo
".pic4"
width
"18.75em"
width
"16.75em"
">"
fromTo
".pic1"
left
"55.125em"
left
"14.3em"
"<"
常用属性 属性 取值 说明 start 数字/方位名词 触发位置 end 数字/方位名词 结束位置 trigger Element 触发元素 animation Tween/Timeline 关联的动画对象 scrub 布尔值/数字 是否跟随滚动条 toggleClass 字符串 切换类名 markers 布尔值 开启标注功能 scroller Element 滚动容器 pin 布尔值 固定元素 direction 数字 滚动方向 (1 向前，-1 向后) isActive 布尔值 实例是否激活 horizontal 布尔值 水平滚动设置 progress 数字 进度 (0~1)
SplitText 文字分割动画 gsap.registerPlugin (SplitText , ScrollTrigger );
document .fonts .ready .then (() => {
gsap.set (".split" , { opacity : 1 });
const splitElements = document .querySelectorAll (".split" );
splitElements.forEach ((element ) => {
SplitText .create (element, {
type : "words,lines" ,
mask : "lines" ,
onSplit : (self ) => {
gsap.from (self.words , {
duration : 1.3 ,
y : 50 ,
opacity : 0 ,
stagger : {
amount : 0.6
},
scrollTrigger : {
trigger : element,
start : "top 88%" ,
end : "top 20%"
}
});
}
});
});
});
AOS 动画
JS 代码 AOS .init ({
offset : 120 ,
delay : 0 ,
duration : 400 ,
easing : 'ease' ,
once : false ,
mirror : false ,
anchorPlacement : 'top-bottom'
});
HTML 代码 直接在对应元素添加对应的类名即可，类名对应动画参考官网。
<div data-aos ="fade-up" > 内容</div >
Lottie 动画 **用途：**可添加关键帧自定义动画，并导出 JSON 文件在 web 端使用
<script src="https://unpkg.com/[email protected] /build/player/lottie.min.js" ></script>
HTML 代码 <div id ="struct_picture" > </div >
JS 代码 const structe_one_container = document .getElementById ('struct_picture' );
const structe_one_animation = lottie.loadAnimation ({
container : structe_one_container,
renderer : 'svg' ,
loop : false ,
autoplay : false ,
path : 'structe_one.json'
});
window .addEventListener ('scroll' , () => {
const rect = structe_one_container.getBoundingClientRect ();
if (rect.top <= window .innerHeight / 1.5 && !structe_one_animation.isPlaying ) {
structe_one_animation.play ();
}
});
Swiper 轮播图 <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" />
HTML 结构 <div class ="swiper" >
<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-prev" > </div >
<div class ="swiper-button-next" > </div >
<div class ="swiper-scrollbar" > </div >
</div >
CSS 控制分页器 .swiper-pagination-bullet-active { background-color : #00E77F ; }
.swiper-pagination-bullet { background-color : #fff ; }
JS 代码 var swiper = new Swiper (".course-slider" , {
spaceBetween : 20 ,
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 ]-1 ];
lastActiveIndex = activeIndex;
});
Font Awesome 图标字体工具 <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" />
**用法：**直接在 HTML 当中嵌入对应的 <i></i> 标签即可（可用 font-size 调整大小）。
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 + "%" ;
}
};
