AI导哈

设计与多媒体

gsap-framer-scroll-animation

github/awesome-copilot

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.

  • 3915 次安装
  • 4.1万 星标
  • 收录于

安装命令

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

SKILL.md

GSAP & Framer Motion — Scroll Animations Skill

Production-grade scroll animations with GitHub Copilot prompts, ready-to-use code recipes, and deep API references.

Design Companion: This skill provides the technical implementation for scroll-driven motion. For the creative philosophy, design principles, and premium aesthetics that should guide how and when to animate, always cross-reference the premium-frontend-ui skill. Together they form a complete approach: premium-frontend-ui decides the what and why; this skill delivers the how.

Quick Library Selector

Need Use
Vanilla JS, Webflow, Vue GSAP
Pinning, horizontal scroll, complex timelines GSAP
React / Next.js, declarative style Framer Motion
whileInView entrance animations Framer Motion
Both in same Next.js app See notes in references

GSAP & Framer Motion — Scroll Animations Skill

Production-grade scroll animations with GitHub Copilot prompts, ready-to-use code recipes, and deep API references.

Design Companion: This skill provides the technical implementation for scroll-driven motion. For the creative philosophy, design principles, and premium aesthetics that should guide how and when to animate, always cross-reference the premium-frontend-ui skill. Together they form a complete approach: premium-frontend-ui decides the what and why; this skill delivers the how.

Quick Library Selector

Need Use
Vanilla JS, Webflow, Vue GSAP
Pinning, horizontal scroll, complex timelines GSAP
React / Next.js, declarative style Framer Motion
whileInView entrance animations Framer Motion
Both in same Next.js app See notes in references

相关 Skills

git-commitgithub/awesome-copilotUse this skill when the user wants to make a Git commit or split changes into more than one commit. Also use it when the user types "/commit" or asks for a conventional commit. The skill examines the diff, stages the related files, writes a Conventional Commits message, and runs git commit. Do not use it when the user wants only a commit message and no commit. Do not use it to push, open a pull request, rebase, or change the commit history.其他4.8万excalidraw-diagram-generatorgithub/awesome-copilotGenerate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.其他3.2万multi-stage-dockerfilegithub/awesome-copilotCreate optimized multi-stage Dockerfiles for any language or framework其他3万documentation-writergithub/awesome-copilotDiátaxis Documentation Expert. An expert technical writer specializing in creating high-quality software documentation, guided by the principles and structure of the Diátaxis technical documentation authoring framework.其他2.8万prdgithub/awesome-copilotGenerate high-quality Product Requirements Documents (PRDs) for software systems and AI-powered features. Includes executive summaries, user stories, technical specifications, and risk analysis.数据与研究2.4万refactorgithub/awesome-copilotSurgical code refactoring to improve maintainability without changing behavior. Covers extracting functions, renaming variables, breaking down god functions, improving type safety, eliminating code smells, and applying design patterns. Less drastic than repo-rebuilder; use for gradual improvements.设计与多媒体2.2万