用途:为 React 项目制作 Awwwards/FWA 级别的高质量网页动画,强调 60fps 性能与 React 优先的实现方式。
主要能力:提供按任务选择动画库的决策矩阵,例如滚动驱动动画用 GSAP + ScrollTrigger + useGSAP,平滑滚动用 Lenis + ReactLenis,React 原生动画用 Motion(Framer Motion),轻量效果用 Anime.js 4.0,复杂时间线用 GSAP,SVG 变形用 GSAP MorphSVG 或 Anime.js,3D 用 Three.js + GSAP,页面过渡用 AnimatePresence 或 GSAP,几何图形、生成艺术、音频响应、2D 物理等也各有对应方案。
使用方式:安装命令为 npm install gsap @gsap/react、npm install lenis、npm install motion、npm install animejs。需在应用级注册 GSAP 插件,并将 Lenis 与 ScrollTrigger 集成(lenis.on('scroll', ScrollTrigger.update),gsap.ticker.add 驱动 lenis.raf)。文档给出磁性光标、磁性按钮、视差首屏、文字逐字揭示、图片揭示、故障文字、分形树、几何剖分、粗野主义网格等 React 模式,并指向 references 目录下的 GSAP、Motion、Anime.js、Lenis、几何图形、音频响应、2D 物理、高级模式、算法艺术、文字特效、几何拼图、设计哲学与性能等参考文件。
适用场景:需要高端动效的营销页、作品集、创意网站与交互体验页面。
限制:资料未提供收费、价格、平台支持范围与效果保证等信息;需注意 Lenis 与 ScrollTrigger 集成、useGSAP 作用域、contextSafe、React 18 Strict Mode、Next.js 'use client'、动态内容后 ScrollTrigger.refresh() 等常见问题,并遵循仅动画 transform 与 opacity、尊重 prefers-reduced-motion 等性能与无障碍规则。