gsap-framer-scroll-animation

# 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 install gsap ``` ```js import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); // MUST call before any ScrollTrigger usage ``` ### Framer Motion (Motion v12, 2025) ```bash npm install motion # new package name since mid-2025 # or: npm ins...