gsap-framer-scroll-animation

$2b

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