gsap-framer-scroll-animation
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 "a...
This skill ships only metadata — no inline instructions. See the source repo for details.
Install this skill
One command (all agents)
Runs the npx skills CLI which auto-detects every AI coding agent you have installed (Claude Code, Cursor, Codex, OpenCode, Windsurf, Copilot, and 51 more).
npx skills add https://github.com/github/awesome-copilotAlternative: shorthand form
npx skills add github/awesome-copilotInstall to a specific agent
Pick the agent you use. The CLI writes the skill to that agent's standard skill directory.
npx skills add github/awesome-copilot --agent claude-codenpx skills add github/awesome-copilot --agent cursornpx skills add github/awesome-copilot --agent codexnpx skills add github/awesome-copilot --agent opencodenpx skills add github/awesome-copilot --agent github-copilotnpx skills add github/awesome-copilot --agent windsurfManual install (no CLI)
Prefer to skip the CLI? Clone the repo and drop the skill folder into your agent's skills directory.
git clone https://github.com/github/awesome-copilot.gitcp -r awesome-copilot ~/.claude/skills/ For other agents, replace ~/.claude/skills/ with their skill directory — see the full list.
Use it
Once installed, ask your agent to "use the gsap-framer-scroll-animation skill" or describe what you want (e.g. "Use this skill whenever the user wants to build scroll animations, scroll effect"). Most agents auto-discover the skill from its SKILL.md description — no slash command needed.
npx skills. Skill files are MIT-style permissive by default — check the source repo for the actual license.
SKILL.md source
--- 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 ---
Want the ready-to-ship business bundle?
500+ agent skills, $15 one-time, lifetime access. 20 categories spanning content, marketing, sales, finance, legal, ops, SEO & more — finished deliverables, not drafts. Works with Claude Code, Codex, Cursor & every agent runtime.
Related skills 6
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
azure-prepare
Prepare Azure apps for deployment (infra Bicep/Terraform, azure.yaml, Dockerfiles). Use for create/modernize or create+deploy; not cross-cloud migration (use azure-cloud-migrate). DO NOT USE FOR: copilot-sdk apps (use azure-hosted-copilot-sdk). WHEN: "create app", "build web app", "create API", "create serverless HTTP API", "create frontend", "create back end", "build a service", "modernize application", "update application", "add authentication", "add caching", "host on Azure", "create and d...
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing,...
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
redesign-existing-projects
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.