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 "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky secti
Profile →npx skills add github/awesome-copilot --skill gsap-framer-scroll-animation --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 ## Setup (Always Do First) ### GSAP ```bash npm instal
- Quick Library Selector
- Setup (Always Do First)
- GSAP
- Framer Motion (Motion v12, 2025)
- Workflow
- The 5 Most Common Scroll Patterns
- 1. Fade-in on enter (GSAP)
- 2. Fade-in on enter (Framer Motion)
- 3. Scrub / scroll-linked (GSAP)
- 4. Scroll-linked (Framer Motion)
- 5. Pinned timeline (GSAP)
- Critical Rules (Apply Always)
- Copilot Prompting Tips
- Reference Files
npm install gsap npm install motion # new package name since mid-2025
What does the gsap-framer-scroll-animation skill do?
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 secti
How do I install it?
Run `npx skills add github/awesome-copilot --skill gsap-framer-scroll-animation --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.