gsap-framer-scroll-animation作者 GitHub

GSAP Framer Scroll Animation Skill.

Claude Code 和 Codex 的动效与视频 skill：视差、钉住区块、横向滚动和文字滚动动画。

Motion & Video
UI 代码

github/awesome-copilot · skills/gsap-framer-scroll-animation/SKILL.mdSKILL.md

--- name: gsap-framer-scroll-animation description: - 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, … --- ## Quick Library Selector ## Setup (Always Do First) ## Workflow ## The 5 Most Common Scroll Patterns ## Critical Rules (Apply Always) ## Copilot Prompting Tips

前言和章节标题读取自上游文件，日期 2026-09-14，完整内容共 6,365 字符

01 功能说明

gsap-framer-scroll-animation Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

此 skill 使用 GSAP ScrollTrigger 和 Framer Motion 实现生产级滚动动画。它涵盖视差效果、滚动触发的显现动画、固定区块、横向滚动以及适用于原生 JavaScript、React 和 Next.js 项目的文本动画。该 skill 内置 Quick Library Selector，用于在 GSAP（适用于原生 JS、Webflow、Vue、pinning 及复杂时间轴）与 Framer Motion（适用于 React/Next.js 声明式风格）之间做出选择。

它提供可直接使用的代码方案、独立参考文件中的完整 API 参考，以及 Copilot 提示模式。该 skill 与 premium-frontend-ui skill 配合使用，后者提供创意理念和设计原则，用以指导何时以及为何进行动画处理。

它产出什么

生产级滚动动画，附带可直接使用的代码方案

查看示例提示词 ↗

工作方式

01
解读意图并选择库
该 skill 首先根据用户请求和项目背景，判断 GSAP 还是 Framer Motion 更合适。
02
阅读参考文档
查阅 references 目录中的相关参考文档，以获取详细的 API 和实现模式。
03
建议安装包
若项目中尚未包含所需的 npm 包，则会提出安装建议。
04
实现动画脚手架
根据所需格式（React 组件、hooks 或原生 JavaScript）搭建动画结构。
05
应用具备无障碍支持的工具
应用正确的滚动或 in-view 工具，确保提供无障碍选项，并且 hooks 不会导致无限重渡染。

02 找到适合场景

何时使用 gsap-framer-scroll-animation Skill

当任务是此类动效与视频时，在 Claude Code 或 Codex 中使用 gsap-framer-scroll-animation skill。以下适用范围和限制取自该 skill 的文件。

适合场景

在原生 JS、React 或 Next.js 中构建滚动动画、滚动触发的显现动画、视差效果、固定区块、横向滚动或文本动画
用户请求，如“滚动时播放动画”“滚动时淡入”“做成像 Apple 那样的滚动效果”“视差效果”“sticky 区块”或“入场动画”
使用 Copilot 提示词模式生成 GSAP 或 Framer Motion 代码

了解边界

需要 GSAPSKILL.md 列出此依赖；没有它该 skill 无法在你的项目中运行。

需要提供的信息

完整选择器、基础图像和滚动范围Copilot 需要提前获得完整的选择器、基础图像和滚动范围，因为含糊的提示词只会产生含糊的代码。
GSAP 特定参数对于 GSAP 实现，需指定选择器、start/end 字符串，以及是否需要 scrub 或 toggleActions。
Framer Motion 特定参数对于 Framer 实现，需指定使用哪个 hook（useScroll 还是 whileInView）、偏移值以及要变换的内容。
准确的错误信息要求 Copilot 修复问题时，粘贴准确的错误信息可以大幅提升修复效果。

03 Skill 内部

gsap-framer-scroll-animation Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

先注册 ScrollTrigger 插件
GSAP 要求在使用任何 ScrollTrigger 功能之前调用 gsap.registerPlugin(ScrollTrigger)。
使用 Scrub 时搭配 Ease None
当 GSAP 中的 scrub 处于激活状态时，始终使用 ease: 'none'，因为在 scrub 时缓动效果会显得不自然。
在 React 中使用 useGSAP
在 React 中，使用来自 @gsap/react 的 useGSAP，而不是普通的 useEffect，因为它会自动清理 ScrollTrigger。
仅在开发阶段添加 Markers
GSAP 调试标记应在开发阶段通过 markers: true 添加，但在生产环境中要移除。
useTransform 输出要放入 style 属性
Framer Motion 的 useTransform 输出必须放在 motion.* 元素的 style 属性中，而不是普通的 div 中。
在 Next.js 中添加 Use Client 指令
任何使用 motion hooks 的 Next.js 文件顶部都必须有 'use client'。
只对 Transform 和 Opacity 做动效
仅对 transform 和 opacity 属性做动画。避免对 width、height 或 box-shadow 做动画，以保证性能。
检查 prefers-reduced-motion
始终检查用户的 prefers-reduced-motion 偏好设置，以尊重无障碍需求。

04 投入使用

在 Claude Code 或 Codex 中安装 gsap-framer-scroll-animation

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 gsap-framer-scroll-animation 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

用于 skills/gsap-framer-scroll-animation/SKILL.md 的通用 skills CLI 形式；该仓库可能会记录其自身的路径。

给 Skill 一个首次动效和视频任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt

Create a pinned hero section with a parallax background image that scales and fades as I scroll down. The hero should pin for 200% of viewport height, with the image starting at scale 1 and ending at 1.3 while opacity drops to 0. Add a fade-in for the headline text that appears after 30% of the scroll range. Use [hero-background.jpg] as the image source.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

确认在任何 ScrollTrigger 使用之前已调用 gsap.registerPlugin(ScrollTrigger)

在 OpenDesign 中通过其 SKILL.md 链接导入 gsap-framer-scroll-animation：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: GitHub
Repository: github.com/github/awesome-copilot 分支 main
Skill 文件: skills/gsap-framer-scroll-animation/SKILL.md 验证时记录的内容校验和；commit 1899b18
License: MIT 来自 LICENSE。
仓库星标数: 38,981 GitHub 快照拍摄于 2026-09-14，针对整个 github/awesome-copilot 仓库，该仓库在此目录中包含 6 个 skills。这不是 gsap-framer-scroll-animation 的评分或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

快速库选择器根据框架和动画复杂度，将使用场景映射到 GSAP 或 Framer Motion 的表格
设置（务必先做）GSAP 和 Framer Motion 的安装命令、所需导入以及插件注册方式
工作流从解读意图到应用工具（含无障碍选项）的五步流程
5 种最常见的滚动模式两个库中淡入、scrub、滚动联动及固定时间轴模式的代码片段
关键规则（务必遵守）关于插件注册、缓动、React hooks、无障碍与性能的八条必须遵守的规则
Copilot 提示技巧如何用完整选择器、滚动范围和错误信息组织提示词，以获得更好的代码生成效果
参考文件列出 gsap.md 和 framer.md 及其完整 API 参考与配方内容的表格
相关 Skill将 premium-frontend-ui skill 列为创意理念方面的搭档，定义何时以及为何使用动画

Skill 自身的描述

"- 当用户想要构建滚动动画、滚动效果、视差、滚动触发显现、固定区块、横向滚动、文本动画，或任何与滚动位置相关的动效时使用此 skill — 适用于原生 JS、React 或 Next.js。涵盖 GSAP ScrollTrigger（固定、scrubbing、吸附、时间轴、横向滚动、ScrollSmoother、matchMedia）和 Framer Motion / Motion v12（useScroll、useTransform、useSpring、whileInView、variants）。即使用户只是说「滚动时动起来」、「滚动时淡入」、「做成 Apple 那样的滚动效果」、「视差效果」、「粘性区块」、「滚动进度条」或「入场动画」，也使用此 skill。同样适用于 GSAP 或 Framer Motion 代码生成的 Copilot 提示模式。可与 premium-frontend-ui skill 配合使用，以获得创意理念和设计级的精致度。"

来自 SKILL.md 的 front-matter 描述。完整文件约 6,365 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 gsap-framer-scroll-animation Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

我的项目应该用 GSAP 还是 Framer Motion？

若使用原生 JS、Webflow、Vue，或需要固定（pinning）、水平滚动或复杂时间轴，请使用 GSAP。若为 React 或 Next.js 项目且偏好声明式风格，或需要 whileInView 入场动画，请使用 Framer Motion。两者可以在同一个 Next.js 应用中共存。

GSAP Framer Scroll Animation

在真实的 Motion 和 Video 任务上运行 gsap-framer-scroll-animation。

下载 OpenDesign，从 SKILL.md 链接导入 gsap-framer-scroll-animation，粘贴上面的 prompt，并在结果之前阅读执行计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

gsap-framer-scroll-animation Skill 在 Claude Code 和 Codex 中的作用

以 skill 自身的术语

工作方式

何时使用 gsap-framer-scroll-animation Skill

适合场景

了解边界

需要提供的信息

gsap-framer-scroll-animation Skill 赋予 Claude Code 和 Codex 的规则

先注册 ScrollTrigger 插件

使用 Scrub 时搭配 Ease None

在 React 中使用 useGSAP

仅在开发阶段添加 Markers

useTransform 输出要放入 style 属性

在 Next.js 中添加 Use Client 指令

只对 Transform 和 Opacity 做动效

检查 prefers-reduced-motion