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

npm install gsap

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger); // MUST call before any ScrollTrigger usage

Framer Motion (Motion v12, 2025)

npm install motion   # new package name since mid-2025
# or: npm install framer-motion  — still works, same API

import { motion, useScroll, useTransform, useSpring } from 'motion/react';
// legacy: import { motion } from 'framer-motion'  — also valid

Workflow

• Interpret the user's intent to identify if GSAP or Framer Motion is the best fit.
• Read the relevant reference document in references/ for detailed APIs and patterns.
• Suggest the required package installation if not already present.
• Implement the scaffold for the animation structure, adhering to the requested format (React components, hook requirements, or vanilla JS).
• Apply the correct tools (scrolling vs in-view elements) ensuring accessibility options are present and hooks don't cause infinite re-renders.

The 5 Most Common Scroll Patterns

Quick reference — full recipes with Copilot prompts are in the reference files.

1. Fade-in on enter (GSAP)

gsap.from('.card', {
  opacity: 0, y: 50, stagger: 0.15, duration: 0.8,
  scrollTrigger: { trigger: '.card', start: 'top 85%' }
});

2. Fade-in on enter (Framer Motion)

<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: '-80px' }}
  transition={{ duration: 0.6 }}
/>

3. Scrub / scroll-linked (GSAP)

gsap.to('.hero-img', {
  scale: 1.3, opacity: 0, ease: 'none',
  scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true }
});

4. Scroll-linked (Framer Motion)

const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
const y = useTransform(scrollYProgress, [0, 1], [0, -100]);
return <motion.div style={{ y }} />;

5. Pinned timeline (GSAP)

const tl = gsap.timeline({
  scrollTrigger: { trigger: '.section', pin: true, scrub: 1, start: 'top top', end: '+=200%' }
});
tl.from('.title', { opacity: 0, y: 60 }).from('.img', { scale: 0.85 });

Critical Rules (Apply Always)

• GSAP: always call gsap.registerPlugin(ScrollTrigger) before using it
• GSAP scrub: always use ease: 'none' — easing feels wrong when scrub is active
• GSAP React: use useGSAP from @gsap/react, never plain useEffect — it auto-cleans ScrollTriggers
• GSAP debug: add markers: true during development; remove before production
• Framer: useTransform output must go into style prop of a motion.* element, not a plain div
• Framer Next.js: always add 'use client' at top of any file using motion hooks
• Both: animate only transform and opacity — avoid width, height, box-shadow
• Accessibility: always check prefers-reduced-motion — see each reference file for patterns
• Premium polish: follow the premium-frontend-ui skill principles for motion timing, easing curves, and restraint — animation should enhance, never overwhelm

Copilot Prompting Tips

• Give Copilot the full selector, base image, and scroll range upfront — vague prompts produce vague code
• For GSAP, always specify: selector, start/end strings, whether you want scrub or toggleActions
• For Framer, always specify: which hook (useScroll vs whileInView), offset values, what to transform
• Paste the exact error message when asking /fix — Copilot fixes are dramatically better with real errors
• Use @workspace scope in Copilot Chat so it reads your existing component structure

Reference Files

| File | Contents |

|---|---|

| references/gsap.md | Full ScrollTrigger API reference, 10 recipes, React (useGSAP), Lenis, matchMedia, accessibility |

| references/framer.md | Full useScroll / useTransform API, 8 recipes, variants, Motion v12 notes, Next.js tips |

Related Skills

| Skill | Relationship |

|---|---|

| premium-frontend-ui | Creative philosophy, design principles, and aesthetic guidelines — defines *when* and *why* to animate |