motion-gsap-scrolltrigger

motion-gsap-scrolltrigger

Catalogue généré le 2026-05-11

En une phrase

PatternsSnippets et bonnes pratiques GSAP + ScrollTrigger pour animer au scroll : reveals,reveals pinning,progressifs, scrub,pinning timelines,d'éléments, cleanup,scrub lié au scroll, timelines complexes, cleanup et refresh sur changements de layout.

Quand l'utiliser

• VoirPour un site marketing ou portfolio avec une narration scrollytellante

Quand tu veux un élément qui reste collé pendant qu'un autre défile (pinning) Pour synchroniser une animation à la descriptionposition ci-dessusexacte etde lascroll section(scrub) «Sur une landing où plusieurs sections doivent "se révéler" en cascade au scroll Pour allerfiabiliser un projet GSAP existant qui a des animations qui ne se déclenchent plus loinaprès ».un changement de layout

Comment l'invoquer

• Slash command : /motion-gsap-scrolltrigger (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— pour des patterns GSAP + ScrollTrigger

PourDescription allerdétaillée

GSAP est la librairie d'animation la plus loinpuissante

GSAPdu +web, et son plugin ScrollTrigger Patterns

est

Objectif

ce

Scrollqu'on narrativeutilise contrôléedès qu'on veut faire du "scroll storytelling" (les sites Apple, Stripe Press, et maintenable.la plupart des landings premium).

Procédure

Ce

skill Reveal/scrub/couvre les trois grands patterns ScrollTrigger : reveal (un élément qui apparaît quand il entre dans la viewport), scrub (une animation dont le timeline est piloté directement par la position du scroll, ce qui crée des effets de "défilement contrôlé"), et pin Limiter(un élément qui reste en place pendant que le contenu défile derrière, technique signature des sites éditoriaux). Il insiste sur les pièges spécifiques à GSAP : ne pas créer des instances inutilesScrollTrigger en double (la consommation explose vite), penser à appeler ScrollTrigger.refresh() quand le DOM change après changementsle dechargement layout(sinon Cleanuples àtriggers unmount,sont calculés sur l'ancien layout), nettoyer toutes les animations au démontage du composant React/Vue pour éviter les fuites mémoire.

Il fournit aussi la variante reduced-motion

:

Outputssur attendus

les

patterns Snippetsscrub/pin, (reveal/scrub/pin)on Checklistremplace refresh/cleanupgénéralement Variantepar reduced-motionun simple

Hints

fade

ou Install:par un affichage instantané. Installation : npm install gsap. Pour Thymon : ce skill est ton kit de survie quand tu attaques un site avec du scroll narratif fort, comme un portfolio ou une landing premium.

Source

• Plugin : perso (standalone)
• Nom interne : motion-gsap-scrolltrigger
• Fichier : /home/thymon/.claude/skills/motion-gsap-scrolltrigger/SKILL.md