Skill GSAP & Framer Motion — Animations au Scroll

Animations au scroll de qualité production avec prompts GitHub Copilot, recettes de code prêtes à l'emploi et références d'API approfondies.

Design Companion: Ce skill fournit l'implémentation technique du mouvement piloté par le scroll. Pour la philosophie créative, les principes de design et l'esthétique premium qui doivent guider comment et quand animer, consultez toujours le skill premium-frontend-ui. Ensemble, ils forment une approche complète : premium-frontend-ui décide du quoi et du pourquoi ; ce skill livre le comment.

Sélecteur Rapide de Bibliothèque

Consultez le fichier de référence pertinent pour les recettes complètes et les prompts Copilot :

• GSAP → references/gsap.md — API ScrollTrigger, toutes les recettes, intégration React
• Framer Motion → references/framer.md — useScroll, useTransform, toutes les recettes

Setup (À Faire en Premier)

GSAP

npm install gsap

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger); // DOIT être appelé avant tout usage de ScrollTrigger

Framer Motion (Motion v12, 2025)

npm install motion   # nouveau nom de package depuis mi-2025
# ou : npm install framer-motion  — fonctionne toujours, même API

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

Workflow

1. Interprétez l'intention de l'utilisateur pour identifier si GSAP ou Framer Motion convient le mieux.
2. Lisez le document de référence pertinent dans references/ pour les API détaillées et les patterns.
3. Suggérez l'installation du package requis s'il n'est pas déjà présent.
4. Implémentez le scaffold pour la structure d'animation, en adhérant au format demandé (composants React, exigences de hook ou vanilla JS).
5. Appliquez les bons outils (scroll vs éléments in-view) en veillant à la présence d'options d'accessibilité et en évitant les re-renders infinis des hooks.

Les 5 Patterns de Scroll les Plus Courants

Référence rapide — les recettes complètes avec prompts Copilot sont dans les fichiers de référence.

1. Fade-in à l'entrée (GSAP)

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

2. Fade-in à l'entrée (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 / lié au scroll (GSAP)

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

4. Lié au scroll (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. Timeline épinglée (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 });

Règles Critiques (À Appliquer Toujours)

• GSAP : toujours appeler gsap.registerPlugin(ScrollTrigger) avant de l'utiliser
• GSAP scrub : toujours utiliser ease: 'none' — l'easing paraît incorrect quand le scrub est actif
• GSAP React : utiliser useGSAP de @gsap/react, jamais plain useEffect — il nettoie automatiquement les ScrollTriggers
• GSAP debug : ajouter markers: true pendant le développement ; supprimer avant la production
• Framer : la sortie de useTransform doit aller dans la prop style d'un élément motion.*, pas une div simple
• Framer Next.js : toujours ajouter 'use client' en haut de tout fichier utilisant les motion hooks
• Les deux : animer uniquement transform et opacity — éviter width, height, box-shadow
• Accessibilité : toujours vérifier prefers-reduced-motion — voir chaque fichier de référence pour les patterns
• Polish premium : suivez les principes du skill premium-frontend-ui pour le timing du mouvement, les courbes d'easing et la retenue — l'animation doit améliorer, jamais surcharger

Conseils de Prompting Copilot

• Donnez à Copilot le sélecteur complet, l'image de base et la plage de scroll d'avance — les prompts vagues produisent un code vague
• Pour GSAP, toujours spécifier : sélecteur, chaînes start/end, si vous voulez scrub ou toggleActions
• Pour Framer, toujours spécifier : quel hook (useScroll vs whileInView), valeurs d'offset, quoi transformer
• Collez le message d'erreur exact quand vous demandez /fix — les corrections Copilot sont dramatiquement meilleures avec des erreurs réelles
• Utilisez la portée @workspace dans Copilot Chat pour qu'il lise la structure de votre composant existant

Fichiers de Référence

Skills Connexes