Gsap Framer Scroll Animation

You need scroll animations that don't feel like a freshman portfolio. This skill gives you production recipes for both GSAP ScrollTrigger and Framer Motion, with the critical setup details that actually matter: useGSAP for React cleanup, ease none for scrub, prefers-reduced-motion checks. It includes GitHub Copilot prompts tuned for each library, covers pinning and horizontal scroll, and explicitly pairs with the premium-frontend-ui skill for design philosophy. If you've ever shipped scroll effects that felt janky or over-engineered, the reference files here are worth the read. Best for React and Next.js projects where scroll interaction is a first-class feature.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 7
skills.sh installs: 4K
GitHub stars: 41K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add github/awesome-copilot --skill gsap-framer-scroll-animation --agent claude-code

Installs into .claude/skills of the current project.

Files

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

Read the relevant reference file for full recipes and Copilot prompts:

GSAP → references/gsap.md — ScrollTrigger API, all recipes, React integration
Framer Motion → references/framer.md — useScroll, useTransform, all recipes