该技能用于在网页中实现滚动驱动动画，覆盖滚动特效、视差、滚动触发显示、固定区块（pinning）、横向滚动和文本动画等常见需求。它提供生产级代码配方、GitHub Copilot 提示以及 GSAP 与 Framer Motion 的 API 参考，并建议与 premium-frontend-ui 技能配合：后者决定动画的时机与审美原则，本技能负责技术实现。
选择库：原生 JS、Webflow、Vue 或需要固定、横向滚动、复杂时间线时用 GSAP；React/Next.js 声明式风格或 whileInView 入场动画用 Framer Motion。二者可在同一 Next.js 应用中使用，具体见参考文件。
安装：GSAP 用 npm install gsap，并须在使用前调用 gsap.registerPlugin(ScrollTrigger)。Framer Motion（Motion v12）用 npm install motion，从 motion/react 导入 motion、useScroll、useTransform、useSpring；旧包名 framer-motion 仍可用且 API 相同。
工作流：判断用户意图选择库，阅读 references/ 下对应文件，提示安装依赖，按 React 组件、Hook 或原生 JS 实现结构，选择滚动或进入视口工具，并确保存在无障碍选项、Hook 不导致无限重渲染。常用模式包括 GSAP 入场淡入、Framer Motion whileInView 入场、GSAP scrub 滚动联动、Framer Motion 滚动联动、GSAP 固定时间线。
关键限制与规则：GSAP 必须先注册 ScrollTrigger；scrub 时使用 ease: 'none'；React 中用 @gsap/react 的 useGSAP 而非 useEffect；开发期可加 markers: true，生产前移除。Framer 的 useTransform 结果必须放入 motion.* 元素的 style，使用 motion Hook 的文件在 Next.js 中须加 'use client'。两者都应只动画 transform 与 opacity，避免 width、height、box-shadow，并检查 prefers-reduced-motion。Copilot 提示要提供完整选择器、起止范围和 Hook 类型，报错时粘贴真实错误信息，可用 @workspace 读取现有组件结构。参考文件为 references/gsap.md（ScrollTrigger API、10 个配方、useGSAP、Lenis、matchMedia、无障碍）与 references/framer.md（useScroll/useTransform API、8 个配方、variants、Motion v12 说明、Next.js 提示）。