motion-gsap-scrolltrigger

motion-gsap-scrolltrigger

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

En une phrase

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

Quand l'utiliser

• Pour 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 position exacte de scroll (scrub)
• Sur une landing où plusieurs sections doivent "se révéler" en cascade au scroll
• Pour fiabiliser un projet GSAP existant qui a des animations qui ne se déclenchent plus après un changement de layout

Comment l'invoquer

• Slash command : /motion-gsap-scrolltrigger
• Auto-invocation : ✅ Oui — pour des patterns GSAP + ScrollTrigger

Description détaillée

GSAP est la librairie d'animation la plus puissante du web, et son plugin ScrollTrigger est ce qu'on utilise dès qu'on veut faire du "scroll storytelling" (les sites Apple, Stripe Press, et la plupart des landings premium).

Ce skill 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 (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 ScrollTrigger en double (la consommation explose vite), penser à appeler ScrollTrigger.refresh() quand le DOM change après le chargement (sinon les triggers 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 : sur les patterns scrub/pin, on remplace généralement par un simple fade ou 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