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

这份文档适合用于企业官网、B2B 官网、产品官网和解决方案页面。目标是让动画库做到开发方便代码清晰动画高级但不花哨后期页面只需要加 HTML 属性即可调用动画一、GSAP 动画库的核心思路不要在每个页面里重复写很多 GSAP 动画代码。推荐做法是h2 data-animatefade-upSection Title/h2 div data-animateimage-reveal img srcproduct.jpg alt /div div data-animatestagger div data-stagger-childCard 1/div div data-stagger-childCard 2/div div data-stagger-childCard 3/div /div也就是说HTML 负责声明动画类型JS 负责统一执行动画。这样以后开发页面时只要写data-animatefade-up就可以自动触发动画。二、推荐文件结构assets/ ├─ css/ │ └─ animations.css ├─ js/ │ └─ animations.js demo.html README.md说明animations.css 放基础样式和动画辅助样式 animations.js 放 GSAP 动画逻辑 demo.html 放所有动画案例 README.md 放使用说明三、页面基础引入方式link relstylesheet hrefassets/css/animations.css script srchttps://cdn.jsdelivr.net/npm/gsap3/dist/gsap.min.js/script script srchttps://cdn.jsdelivr.net/npm/gsap3/dist/ScrollTrigger.min.js/script script srcassets/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-animatefade-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);这就是一个动画库的最小雏形。五、案例 1Fade Up 内容上移动画适合场景标题进入段落进入按钮进入产品卡片进入HTMLsection span data-animatefade-upENERGY SOLUTION/span h2 data-animatefade-upReliable Power for Critical Sites/h2 p data-animatefade-up Smart energy infrastructure for telecom, industrial and distributed sites. /p /sectionJSfadeUp() { const items gsap.utils.toArray([data-animatefade-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% } } ); }); }效果说明元素从下方向上浮现适合欧美官网常见的干净进入动画。六、案例 2Fade Left 左侧进入动画适合场景左右结构模块图片 文案模块产品介绍模块HTMLdiv classsplit-section div data-animatefade-left h2Modular Energy Cabinet/h2 pDesigned for fast deployment and reliable operation./p /div div img srccabinet.jpg alt /div /divJSfadeLeft() { const items gsap.utils.toArray([data-animatefade-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% } } ); }); }效果说明元素从左侧进入适合做内容分区不建议位移太大否则会显得廉价。七、案例 3Stagger 卡片交错进入动画适合场景产品卡片解决方案卡片新闻列表优势模块HTMLdiv classcard-grid data-animatestagger article data-stagger-child h3Smart Control/h3 pReal-time energy monitoring./p /article article data-stagger-child h3Hybrid Power/h3 pSolar, battery and grid integration./p /article article data-stagger-child h3Remote OM/h3 pLower maintenance workload./p /article /divJSstagger() { const groups gsap.utils.toArray([data-animatestagger]); 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% } } ); }); }效果说明多个卡片不是同时出现而是依次出现更有节奏感。八、案例 4Image Reveal 图片揭示动画适合场景产品图案例图Banner 图片解决方案配图HTMLdiv classimage-reveal data-animateimage-reveal img srcenergy-site.jpg altEnergy Site /divCSS.image-reveal { position: relative; overflow: hidden; } .image-reveal img { display: block; width: 100%; transform: scale(1.08); }JSimageReveal() { const items gsap.utils.toArray([data-animateimage-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数字增长动画适合场景项目数据年限装机容量服务客户数量节能比例HTMLdiv classstats strong data-animatenumber data-number-target1200 data-number-suffix0/strong pProjects Delivered/p /div div classstats strong data-animatenumber data-number-target98 data-number-suffix%0/strong pSystem Availability/p /divJSnumberCount() { const items gsap.utils.toArray([data-animatenumber]); 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 增长到目标值适合数据展示模块。十、案例 6Parallax 图片视差动画适合场景Banner 背景产品大图装饰图片高级视觉模块HTMLdiv classhero-visual img srccontainer-energy.jpg alt data-animateparallax data-parallax-y-120 /divJSparallax() { const items gsap.utils.toArray([data-animateparallax]); 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 大标题模块标题品牌标语HTMLh1 data-animatetext-lines Smart Energy Infrastructurebr for Distributed Critical Sites /h1JStextLines() { const items gsap.utils.toArray([data-animatetext-lines]); items.forEach((el) { const lines el.innerHTML.split(br); el.innerHTML lines .map(line span classline-maskspan${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-animateblur-rise Content /div第二步JS 新增方法blurRise() { const items gsap.utils.toArray([data-animateblur-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 srchttps://cdn.jsdelivr.net/npm/gsap3/dist/gsap.min.js/script检查 ScrollTrigger 是否引入script srchttps://cdn.jsdelivr.net/npm/gsap3/dist/ScrollTrigger.min.js/script检查是否调用初始化HJAnimations.init();2. 滚动动画不触发检查是否注册插件gsap.registerPlugin(ScrollTrigger);检查元素是否写了data-animatefade-up3. 动画太夸张怎么办减少位移y: 60改成y: 30减少时间duration: 1.2改成duration: 0.84. 移动端动画太重怎么办可以在 CSS 或 JS 中减少复杂效果。简单做法const isMobile window.innerWidth 768; if (isMobile) { // 移动端少做视差、固定滚动、大范围位移动画 }十七、推荐最终使用方式页面开发时尽量保持 HTML 简单section classsection div classcontainer span data-animatefade-upSOLUTIONS/span h2 data-animatetext-lines Smarter Energybr for Critical Infrastructure /h2 p data-animatefade-up Integrated power systems for telecom, industrial and distributed sites. /p div classcard-grid data-animatestagger article data-stagger-child h3Hybrid Power/h3 pSolar, battery and grid coordination./p /article article data-stagger-child h3Remote Monitoring/h3 pReal-time operation and maintenance./p /article article data-stagger-child h3Reliable Backup/h3 pStable power for critical loads./p /article /div /div /section这样前端页面结构清晰动画也容易统一维护。十八、总结自己制作 GSAP 动画库的关键不是写很多动画而是建立一套统一调用方式。最推荐的方式是data-animate动画名称然后在 JS 里统一管理HJAnimations.init();这样后期无论是做首页、产品页、解决方案页、案例页动画都可以快速复用。