gsap-framer-scroll-animationpar GitHub

GSAP Framer Scroll Animation Skill.

Un skill Claude Code et Codex pour le motion et la vidéo : parallaxe, sections épinglées, défilement horizontal et animations de texte au scroll.

Mouvement et vidéo
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

github/awesome-copilot · skills/gsap-framer-scroll-animation/SKILL.mdSKILL.md

--- name: gsap-framer-scroll-animation description: - 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, … --- ## Quick Library Selector ## Setup (Always Do First) ## Workflow ## The 5 Most Common Scroll Patterns ## Critical Rules (Apply Always) ## Copilot Prompting Tips

En-tête et titres de section lus depuis le fichier d'origine le 14/09/2026 · 6 365 caractères au total

01 Ce qu'il fait

Ce que fait le skill gsap-framer-scroll-animation dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill met en œuvre des animations au scroll de qualité production à l'aide de GSAP ScrollTrigger et Framer Motion. Il couvre les effets de parallaxe, les révélations déclenchées au scroll, les sections épinglées, le défilement horizontal et les animations de texte pour les projets JavaScript vanille, React et Next.js. Le skill inclut un sélecteur rapide de bibliothèque pour choisir entre GSAP (pour JS vanille, Webflow, Vue, l'épinglage et les timelines complexes) et Framer Motion (pour le style déclaratif React/Next.js).

Il fournit des recettes de code prêtes à l'emploi, des références API complètes dans des fichiers de référence séparés, et des schémas de prompting Copilot. Le skill se combine avec le skill premium-frontend-ui, qui apporte la philosophie créative et les principes de design guidant quand et pourquoi animer.

Ce qu'il produit

Animations au scroll de qualité production avec des recettes de code prêtes à l'emploi

Voir l'exemple de prompt ↗

Fonctionnement

01
Interpréter l'intention et choisir la bibliothèque
Le skill identifie d'abord si GSAP ou Framer Motion convient le mieux selon la demande de l'utilisateur et le contexte du projet.
02
Lire la documentation de référence
Le document de référence pertinent dans le répertoire references est consulté pour les API détaillées et les schémas d'implémentation.
03
Suggérer l'installation des paquets
Les paquets npm requis sont suggérés s'ils ne sont pas déjà présents dans le projet.
04
Implémenter l'ossature de l'animation
La structure de l'animation est mise en place dans le format demandé, qu'il s'agisse de composants React, de hooks ou de JavaScript vanille.
05
Appliquer les outils avec accessibilité
Les bons outils de défilement ou de détection de visibilité sont appliqués, en veillant à la présence des options d'accessibilité et à ce que les hooks ne provoquent pas de re-rendus infinis.

02 Trouvez celui qui vous convient

Quand utiliser le skill gsap-framer-scroll-animation

Utilisez le skill gsap-framer-scroll-animation dans Claude Code ou Codex lorsque le travail concerne du motion et de la vidéo de ce type. La portée et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

Créer des animations au scroll, des révélations déclenchées au scroll, des effets de parallaxe, des sections épinglées, un défilement horizontal ou des animations de texte en JS vanille, React ou Next.js
Demandes utilisateur comme « animer au scroll », « faire apparaître en fondu au scroll », « faire défiler comme Apple », « effet de parallaxe », « section collante » ou « animation d'entrée »
Générer du code GSAP ou Framer Motion avec des modèles de prompts Copilot

Connaître les limites

Nécessite GSAPLe SKILL.md mentionne cette dépendance ; le skill ne fonctionne pas sans elle dans votre projet.

Quoi fournir

Sélecteur complet, image de base et plage de défilementCopilot a besoin du sélecteur complet, de l'image de base et de la plage de défilement dès le départ, car des prompts vagues produisent du code vague.
Paramètres spécifiques à GSAPPour les implémentations GSAP, précisez le sélecteur, les chaînes start/end, et si scrub ou toggleActions est souhaité.
Paramètres spécifiques à Framer MotionPour les implémentations Framer, précisez quel hook utiliser (useScroll vs whileInView), les valeurs d'offset, et ce qui doit être transformé.
Messages d'erreur exactsLorsque vous demandez à Copilot de corriger des problèmes, collez le message d'erreur exact pour des corrections nettement meilleures.

03 Dans le skill

Règles que le skill gsap-framer-scroll-animation donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Enregistrer d'abord le plugin ScrollTrigger
GSAP nécessite d'appeler gsap.registerPlugin(ScrollTrigger) avant d'utiliser toute fonctionnalité ScrollTrigger.
Utiliser ease none avec scrub
Lorsque scrub est actif dans GSAP, utilisez toujours ease: 'none' car l'easing paraît incorrect lors du scrub.
Utiliser useGSAP en React
En React, utilisez useGSAP de @gsap/react plutôt qu'un simple useEffect, car il nettoie automatiquement les ScrollTriggers.
Ajouter des markers uniquement en développement
Les markers de debug GSAP doivent être ajoutés avec markers: true pendant le développement mais retirés avant la production.
La sortie de useTransform va dans la prop style
La sortie de useTransform de Framer Motion doit être placée dans la prop style d'un élément motion.*, pas d'un simple div.
Ajouter la directive use client dans Next.js
Tout fichier Next.js utilisant des hooks motion doit avoir 'use client' en haut du fichier.
N'animer que Transform et Opacity
Animez uniquement les propriétés transform et opacity. Évitez d'animer width, height ou box-shadow pour des raisons de performance.
Vérifier prefers-reduced-motion
Vérifiez toujours la préférence utilisateur prefers-reduced-motion pour respecter les besoins d'accessibilité.

04 Mettez-le en pratique

Installer gsap-framer-scroll-animation dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter gsap-framer-scroll-animation à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

Forme générique de la commande skills pour skills/gsap-framer-scroll-animation/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de motion et vidéo

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Create a pinned hero section with a parallax background image that scales and fades as I scroll down. The hero should pin for 200% of viewport height, with the image starting at scale 1 and ending at 1.3 while opacity drops to 0. Add a fade-in for the headline text that appears after 30% of the scroll range. Use [hero-background.jpg] as the image source.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Vérifiez que gsap.registerPlugin(ScrollTrigger) est appelé avant toute utilisation de ScrollTrigger

Dans OpenDesign, importez gsap-framer-scroll-animation depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: GitHub
Repository: github.com/github/awesome-copilot Branche main
Fichier du skill: skills/gsap-framer-scroll-animation/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 1899b18
License: MIT D'après LICENSE.
Étoiles du dépôt: 38 981 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt github/awesome-copilot, qui contient 6 skills dans ce catalogue. Ce n'est pas une note ou un compteur d'utilisation pour gsap-framer-scroll-animation.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Sélecteur rapide de bibliothèqueTableau associant les cas d'usage à GSAP ou Framer Motion selon le framework et la complexité de l'animation
Configuration (toujours en premier)Commandes d'installation et imports requis pour GSAP et Framer Motion avec enregistrement des plugins
WorkflowProcessus en cinq étapes, de l'interprétation de l'intention à l'application des outils, avec options d'accessibilité
Les 5 motifs de défilement les plus courantsExtraits de code pour les motifs fade-in, scrub, scroll-linked et pinned timeline dans les deux bibliothèques
Règles critiques (à toujours appliquer)Huit règles incontournables sur l'enregistrement des plugins, l'easing, les hooks React, l'accessibilité et la performance
Conseils de prompting pour CopilotComment structurer les prompts avec des sélecteurs complets, des plages de scroll et des messages d'erreur pour une meilleure génération de code
Fichiers de référenceTableau listant gsap.md et framer.md avec leurs références d'API complètes et leur contenu de recettes
Skills associésRépertorie le skill premium-frontend-ui comme compagnon de philosophie créative définissant quand et pourquoi animer

Description du skill lui-même

- Utilisez ce skill lorsque l'utilisateur souhaite créer des animations au défilement, des effets de scroll, du parallaxe, des révélations déclenchées par le scroll, des sections épinglées, du défilement horizontal, des animations de texte ou tout mouvement lié à la position de défilement — en vanilla JS, React ou Next.js. Couvre GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) et Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Utilisez ce skill même si l'utilisateur dit simplement « animer au scroll », « faire apparaître en fondu pendant le défilement », « faire défiler comme Apple », « effet parallaxe », « section collante », « barre de progression du scroll » ou « animation d'entrée ». Se déclenche également pour les patterns de prompt Copilot pour la génération de code GSAP ou Framer Motion. Se combine avec le skill premium-frontend-ui pour la philosophie créative et le raffinement au niveau design.

Description front-matter de SKILL.md. Le fichier complet fait environ 6 365 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill gsap-framer-scroll-animation

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Dois-je utiliser GSAP ou Framer Motion pour mon projet ?

Utilisez GSAP pour du JS vanilla, Webflow, Vue, ou lorsque vous avez besoin de pinning, de scroll horizontal ou de timelines complexes. Utilisez Framer Motion pour des projets React ou Next.js avec un style déclaratif, ou lorsque vous souhaitez des animations d'entrée whileInView. Les deux peuvent coexister dans la même application Next.js.

GSAP Framer Scroll Animation

Exécuter gsap-framer-scroll-animation sur une vraie tâche de mouvement et vidéo.

Téléchargez OpenDesign, importez gsap-framer-scroll-animation depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills

Terminal

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

Ce que fait le skill gsap-framer-scroll-animation dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill gsap-framer-scroll-animation

Bon choix

Connaître les limites

Quoi fournir

Règles que le skill gsap-framer-scroll-animation donne à Claude Code et Codex

Enregistrer d'abord le plugin ScrollTrigger

Utiliser ease none avec scrub

Utiliser useGSAP en React

Ajouter des markers uniquement en développement

La sortie de useTransform va dans la prop style

Ajouter la directive use client dans Next.js

N'animer que Transform et Opacity

Vérifier prefers-reduced-motion