当前位置：首页 > news >正文

如何自己制作一套 GSAP 官网动画库

news 2026/6/13 14:29:57

这份文档适合用于企业官网、B2B 官网、产品官网和解决方案页面。目标是让动画库做到：

开发方便
代码清晰
动画高级但不花哨
后期页面只需要加 HTML 属性即可调用动画

一、GSAP 动画库的核心思路

不要在每个页面里重复写很多 GSAP 动画代码。

推荐做法是：

<h2 data-animate="fade-up">Section Title</h2> <div data-animate="image-reveal"> <img src="product.jpg" alt=""> </div> <div data-animate="stagger"> <div data-stagger-child>Card 1</div> <div data-stagger-child>Card 2</div> <div data-stagger-child>Card 3</div> </div>

也就是说：

HTML 负责声明动画类型，JS 负责统一执行动画。

这样以后开发页面时，只要写：

data-animate="fade-up"

就可以自动触发动画。

二、推荐文件结构

assets/ ├─ css/ │ └─ animations.css ├─ js/ │ └─ animations.js demo.html README.md

说明：

animations.css 放基础样式和动画辅助样式 animations.js 放 GSAP 动画逻辑 demo.html 放所有动画案例 README.md 放使用说明

三、页面基础引入方式

<link rel="stylesheet" href="assets/css/animations.css"> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="assets/js/animations.js"></script> <script> HJAnimations.init(); </script>

注意：

animations.js

必须放在 GSAP 和 ScrollTrigger 后面。

四、先写一个最小版动画库

1. animations.js 基础结构

(function (window) { 'use strict'; const HJAnimations = { init() { if (typeof gsap === 'undefined') { console.warn('GSAP is not loaded.'); return; } if (typeof ScrollTrigger !== 'undefined') { gsap.registerPlugin(ScrollTrigger); } this.fadeUp(); this.fadeLeft(); this.stagger(); this.imageReveal(); this.numberCount(); this.parallax(); }, fadeUp() { const items = gsap.utils.toArray('[data-animate="fade-up"]'); items.forEach((el) => { gsap.fromTo( el, { opacity: 0, y: 60 }, { opacity: 1, y: 0, duration: 1, ease: 'power3.out', scrollTrigger: { trigger: el, start: 'top 85%' } } ); }); } }; window.HJAnimations = HJAnimations; })(window);

这就是一个动画库的最小雏形。

五、案例 1：Fade Up 内容上移动画

适合场景

标题进入
段落进入
按钮进入
产品卡片进入

HTML

<section> <span data-animate="fade-up">ENERGY SOLUTION</span> <h2 data-animate="fade-up">Reliable Power for Critical Sites</h2> <p data-animate="fade-up"> Smart energy infrastructure for telecom, industrial and distributed sites. </p> </section>

JS

fadeUp() { const items = gsap.utils.toArray('[data-animate="fade-up"]'); items.forEach((el) => { gsap.fromTo( el, { opacity: 0, y: 60 }, { opacity: 1, y: 0, duration: 1, ease: 'power3.out', scrollTrigger: { trigger: el, start: 'top 85%' } } ); }); }

效果说明

元素从下方向上浮现，适合欧美官网常见的干净进入动画。

六、案例 2：Fade Left 左侧进入动画

适合场景

左右结构模块
图片 + 文案模块
产品介绍模块

HTML

<div class="split-section"> <div data-animate="fade-left"> <h2>Modular Energy Cabinet</h2> <p>Designed for fast deployment and reliable operation.</p> </div> <div> <img src="cabinet.jpg" alt=""> </div> </div>

JS

fadeLeft() { const items = gsap.utils.toArray('[data-animate="fade-left"]'); items.forEach((el) => { gsap.fromTo( el, { opacity: 0, x: -80 }, { opacity: 1, x: 0, duration: 1, ease: 'power3.out', scrollTrigger: { trigger: el, start: 'top 85%' } } ); }); }

效果说明

元素从左侧进入，适合做内容分区，不建议位移太大，否则会显得廉价。

七、案例 3：Stagger 卡片交错进入动画

适合场景

产品卡片
解决方案卡片
新闻列表
优势模块

HTML

<div class="card-grid" data-animate="stagger"> <article data-stagger-child> <h3>Smart Control</h3> <p>Real-time energy monitoring.</p> </article> <article data-stagger-child> <h3>Hybrid Power</h3> <p>Solar, battery and grid integration.</p> </article> <article data-stagger-child> <h3>Remote O&M</h3> <p>Lower maintenance workload.</p> </article> </div>

JS

stagger() { const groups = gsap.utils.toArray('[data-animate="stagger"]'); groups.forEach((group) => { const children = group.querySelectorAll('[data-stagger-child]'); gsap.fromTo( children, { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 0.9, stagger: 0.12, ease: 'power3.out', scrollTrigger: { trigger: group, start: 'top 85%' } } ); }); }

效果说明

多个卡片不是同时出现，而是依次出现，更有节奏感。

八、案例 4：Image Reveal 图片揭示动画

适合场景

产品图
案例图
Banner 图片
解决方案配图

HTML

<div class="image-reveal" data-animate="image-reveal"> <img src="energy-site.jpg" alt="Energy Site"> </div>

CSS

.image-reveal { position: relative; overflow: hidden; } .image-reveal img { display: block; width: 100%; transform: scale(1.08); }

JS

imageReveal() { const items = gsap.utils.toArray('[data-animate="image-reveal"]'); items.forEach((el) => { const img = el.querySelector('img'); gsap.fromTo( img, { scale: 1.15, opacity: 0 }, { scale: 1, opacity: 1, duration: 1.2, ease: 'power3.out', scrollTrigger: { trigger: el, start: 'top 85%' } } ); }); }

效果说明

图片从轻微放大状态恢复到正常大小，视觉更高级，适合欧美风官网。

九、案例 5：数字增长动画

适合场景

项目数据
年限
装机容量
服务客户数量
节能比例

HTML

<div class="stats"> <strong data-animate="number" data-number-target="1200" data-number-suffix="+">0</strong> <p>Projects Delivered</p> </div> <div class="stats"> <strong data-animate="number" data-number-target="98" data-number-suffix="%">0</strong> <p>System Availability</p> </div>

JS

numberCount() { const items = gsap.utils.toArray('[data-animate="number"]'); items.forEach((el) => { const target = Number(el.dataset.numberTarget || 0); const suffix = el.dataset.numberSuffix || ''; const obj = { value: 0 }; gsap.to(obj, { value: target, duration: 1.6, ease: 'power2.out', scrollTrigger: { trigger: el, start: 'top 90%' }, onUpdate() { el.textContent = Math.round(obj.value) + suffix; } }); }); }

效果说明

数字从 0 增长到目标值，适合数据展示模块。

十、案例 6：Parallax 图片视差动画

适合场景

Banner 背景
产品大图
装饰图片
高级视觉模块

HTML

<div class="hero-visual"> <img src="container-energy.jpg" alt="" data-animate="parallax" data-parallax-y="-120" > </div>

JS

parallax() { const items = gsap.utils.toArray('[data-animate="parallax"]'); items.forEach((el) => { const y = Number(el.dataset.parallaxY || -80); gsap.to(el, { y: y, ease: 'none', scrollTrigger: { trigger: el, start: 'top bottom', end: 'bottom top', scrub: true } }); }); }

效果说明

页面滚动时图片产生轻微位移，增强空间感。

注意：视差动画不要太强，企业官网建议控制在-60到-160之间。

十一、案例 7：高级文字逐行出现

适合场景

Hero 大标题
模块标题
品牌标语

HTML

<h1 data-animate="text-lines"> Smart Energy Infrastructure<br> for Distributed Critical Sites </h1>

JS

textLines() { const items = gsap.utils.toArray('[data-animate="text-lines"]'); items.forEach((el) => { const lines = el.innerHTML.split('<br>'); el.innerHTML = lines .map(line => `<span class="line-mask"><span>${line}</span></span>`) .join(''); const innerLines = el.querySelectorAll('.line-mask span'); gsap.fromTo( innerLines, { y: '110%', opacity: 0 }, { y: '0%', opacity: 1, duration: 1, stagger: 0.12, ease: 'power4.out', scrollTrigger: { trigger: el, start: 'top 85%' } } ); }); }

CSS

.line-mask { display: block; overflow: hidden; } .line-mask span { display: inline-block; }

效果说明

文字按行从下方揭示，适合高级官网的主标题。

十二、完整动画库结构示例

(function (window) { 'use strict'; const HJAnimations = { init() { if (typeof gsap === 'undefined') { console.warn('GSAP is not loaded.'); return; } if (typeof ScrollTrigger !== 'undefined') { gsap.registerPlugin(ScrollTrigger); } this.fadeUp(); this.fadeLeft(); this.stagger(); this.imageReveal(); this.numberCount(); this.parallax(); this.textLines(); }, fadeUp() { // fade-up 动画 }, fadeLeft() { // fade-left 动画 }, stagger() { // 卡片交错动画 }, imageReveal() { // 图片揭示动画 }, numberCount() { // 数字增长动画 }, parallax() { // 视差动画 }, textLines() { // 文字逐行动画 } }; window.HJAnimations = HJAnimations; })(window);

十三、建议统一动画参数

为了让整个网站动画风格统一，建议统一这些参数：

const defaults = { duration: 1, ease: 'power3.out', start: 'top 85%', stagger: 0.12 };

例如：

gsap.fromTo( el, { opacity: 0, y: 60 }, { opacity: 1, y: 0, duration: defaults.duration, ease: defaults.ease, scrollTrigger: { trigger: el, start: defaults.start } } );

这样整个网站的动画节奏会更统一。

十四、如何让动画更“欧美高级”

不要追求很多花哨效果，重点是克制。

推荐原则：

1. 动画时间稍长一点：0.8s - 1.2s 2. 位移不要太大：40px - 80px 3. 缓动使用 power3.out 或 power4.out 4. 图片动画用 scale，而不是乱飞 5. 卡片动画用 stagger，增强节奏 6. 大标题适合 text-lines 7. 页面中不要所有元素都动

不推荐：

1. 大幅旋转 2. 大幅弹跳 3. 快速闪动 4. 每个元素都同时动画 5. 动画速度过快 6. 过度使用 3D 翻转

十五、动画库扩展方法

以后想新增一个动画，只需要三步。

第一步：HTML 添加动画名称

<div data-animate="blur-rise"> Content </div>

第二步：JS 新增方法

blurRise() { const items = gsap.utils.toArray('[data-animate="blur-rise"]'); items.forEach((el) => { gsap.fromTo( el, { opacity: 0, y: 50, filter: 'blur(16px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 1, ease: 'power3.out', scrollTrigger: { trigger: el, start: 'top 85%' } } ); }); }

第三步：init 里调用

init() { this.blurRise(); }

这样一个新动画就完成了。

十六、常见问题

1. 动画没有执行？

检查 GSAP 是否引入：

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

检查 ScrollTrigger 是否引入：

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

检查是否调用初始化：

HJAnimations.init();

2. 滚动动画不触发？

检查是否注册插件：

gsap.registerPlugin(ScrollTrigger);

检查元素是否写了：

data-animate="fade-up"

3. 动画太夸张怎么办？

减少位移：

y: 60

改成：

y: 30

减少时间：

duration: 1.2

改成：

duration: 0.8

4. 移动端动画太重怎么办？

可以在 CSS 或 JS 中减少复杂效果。

简单做法：

const isMobile = window.innerWidth < 768; if (isMobile) { // 移动端少做视差、固定滚动、大范围位移动画 }

十七、推荐最终使用方式

页面开发时，尽量保持 HTML 简单：

<section class="section"> <div class="container"> <span data-animate="fade-up">SOLUTIONS</span> <h2 data-animate="text-lines"> Smarter Energy<br> for Critical Infrastructure </h2> <p data-animate="fade-up"> Integrated power systems for telecom, industrial and distributed sites. </p> <div class="card-grid" data-animate="stagger"> <article data-stagger-child> <h3>Hybrid Power</h3> <p>Solar, battery and grid coordination.</p> </article> <article data-stagger-child> <h3>Remote Monitoring</h3> <p>Real-time operation and maintenance.</p> </article> <article data-stagger-child> <h3>Reliable Backup</h3> <p>Stable power for critical loads.</p> </article> </div> </div> </section>

这样前端页面结构清晰，动画也容易统一维护。