01
Installe le pack de skills
Dans Claude Code, une seule commande suffit pour que Claude devienne expert GSAP.
/plugin marketplace add greensock/gsap-skillsGuide interactif · GSAP 3.13 · 100% gratuit
Tu n'as pas besoin de connaître la syntaxe GSAP. Tu décris l'animation en français, Claude écrit le code.
❯ ▌
✓ 8 skills chargés : core, timeline, scrolltrigger, plugins, utils, react, performance, frameworks
La méthode
01
Dans Claude Code, une seule commande suffit pour que Claude devienne expert GSAP.
/plugin marketplace add greensock/gsap-skills02
Avant de te lancer, demande à Claude quelles parties de ta page méritent le plus d'être animées, avec des idées concrètes.
Analyse mon site et propose-moi
les animations les plus intéressantes.03
Pas de syntaxe à apprendre. Tu décris l'effet voulu comme à un motion designer, Claude pioche dans les skills.
Le titre fade-in du bas, les boutons
juste après, l'image slide depuis
la droite avec un léger overshoot.04
Trop rapide ? Trop sec ? Tu ajustes en langage naturel, Claude affine les easings et les durées.
Ralentis l'apparition des cartes
et ajoute un léger rebond à la fin.Copie-colle
continue de scroller →
Au chargement
« Avec les skills GSAP, anime mon hero au chargement : le titre fade-in du bas, les boutons apparaissent juste après, l'image slide depuis la droite avec un léger overshoot. »
gsap.timeline() · ease: back.out
Au scroll
« Avec ScrollTrigger, révèle la section Features au scroll : chaque carte arrive en stagger depuis le bas. Pin la section pendant l'animation pour un effet narratif. »
ScrollTrigger · pin: true · stagger
À l'interaction
« Fais passer mon icône menu de burger à croix au clic, avec une rotation fluide. Le plugin MorphSVG est gratuit maintenant, profites-en. »
MorphSVG · rotation · timeline.reverse()
À toi de jouer
Clique sur le bouton. Cette animation a été demandée en une phrase.