awwwards-animations-skill
一站式创建Awwwards级别网页动画的React技能库
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：awwwards-animations-skill。 它的用途是：一站式创建Awwwards级别网页动画的React技能库 完整的 Skill 内容见：https://321skill.com/skills/awwwards-animations-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用Next.js做一个设计师作品集网站，需要添加一个随着滚动逐渐显现文字和图片的酷炫效果，并且滚动要非常顺滑。”，AI会基于此技能库，建议你采用GSAP的ScrollTrigger和Lenis平滑滚动方案，并提供配置好的React组件代码示例，指导你如何集成以实现60fps的Awwwards级体验。
介绍
这个技能库旨在解决开发者在构建高端、获奖级别的网页动画时面临的挑战，如确保60fps流畅度、管理复杂的动画时间线和集成多种动画库。它提供了基于React的现代化解决方案，通过整合GSAP、Framer Motion、Anime.js和Lenis等业界领先工具，并辅以详细的决策矩阵，帮助开发者根据具体任务（如滚动驱动动画、平滑滚动、SVG形变）快速选择最合适的库和技术栈。
使用方式非常直接：开发者通过npm安装推荐的动画库，然后在React项目中按照提供的配置示例进行集成。例如，通过一个封装好的SmoothScroll组件将Lenis平滑滚动与GSAP的ScrollTrigger插件无缝结合，确保滚动动画的高性能。技能库强调“React-first”方法，提供了如useGSAP这样的自定义Hook，确保动画逻辑与React生命周期正确绑定并自动清理。
它非常适合追求卓越视觉体验的前端开发者、创意技术专家以及需要为高端品牌或作品集网站打造独特交互的团队。无论是构建视差滚动、自定义光标、复杂的页面过渡，还是生成算法艺术、几何图形动画，这个技能库都能提供专业级的指导。
与零散的教程或单一的动画库文档不同，此技能库的核心价值在于其“决策矩阵”。它不是一个简单的工具列表，而是一个经过深思熟虑的、基于场景的选型指南。它直接对比了不同工具在特定任务下的优劣（例如，复杂时间线用GSAP，React原生动画用Framer Motion），帮助开发者避免选型困惑，直接从最佳实践开始，显著提升开发效率和最终效果的专业度。
核心特点
核心区别在于其提供了基于具体动画任务的“决策矩阵”，而非简单的工具罗列，能直接指导开发者为“平滑滚动”、“SVG形变”等具体场景选择最优技术栈（GSAP、Motion或Anime.js）。同时，它强调与React生态的深度集成，提供了开箱即用的、包含自动清理的Hooks配置方案。
注意事项
不适合对包体积极度敏感（如需要极简动画）的轻量级项目，或完全不需要复杂交互和60fps高性能动画的简单展示页面。
常见问题
如何选择GSAP和Framer Motion？
根据决策矩阵：复杂滚动动画和精细时间线控制选GSAP+ScrollTrigger；追求React原生集成和声明式API的组件动画选Framer Motion。
如何实现高性能的平滑滚动？
使用Lenis库，并按照技能库提供的SmoothScroll组件示例将其与GSAP ScrollTrigger集成，以确保动画帧同步。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/awwwards-animations-skill/raw/index.md 读取 awwwards-animations-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/awwwards-animations-skill/raw/index.md（查看排版版本）