网页滚动动画开发

原名：gsap-framer-scroll-animation

使用 GSAP 或 Framer Motion 实现滚动触发、视差、固定区块和文本动画。

中文 Skills 技能说明

适合品牌页和产品页面需要可控动效的场景。动效应服务于信息层级并兼顾性能、移动端和减少动态效果偏好；安装依赖和修改正式页面前确认技术栈与设计范围。

上游能力依据

上游原始适用说明：Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish.

上游 SKILL.md 主要章节（保留原文标题）：

使用边界

先核对上游说明、依赖、输入资料和所需权限。涉及写入、删除、发布、支付或外部发送时，必须在执行前人工确认。

作者、翻译与许可证

原作者
GitHub, Inc. 与 awesome-copilot contributors
中文翻译
CEOFans翻译
许可证
MIT
上游来源
https://github.com/github/awesome-copilot/tree/3f0bba475ec40b9680e1d0311b9caffeec5ad4c3/skills/gsap-framer-scroll-animation

适用范围

平台：linux、macos、windows；标签：设计与前端、网页滚动动画开发

安全提示

基础静态扫描不等于绝对安全。技能可能调用命令、浏览器、云服务或本地文件，请在最小权限环境中使用，高风险操作必须人工确认。

如发现侵权、许可证或安全问题，可在本页前台提交投诉，管理员复核后可立即下架。