Le problème avec CSS seul
Quand j'ai commencé à animer mon portfolio, j'utilisais CSS transitions et @keyframes. C'est natif, rapide à écrire, pas de dépendance. Mais très vite j'ai eu ce problème :
Comment je fais pour que l'animation B commence exactement 300ms après la fin de l'animation A ?
Avec CSS pur, tu jonglais avec animation-delay, mais si l'animation A a une durée variable, c'est ingérable. Et pour le scroll ? Soit tu utilises IntersectionObserver à la main, soit tu souffres.
Ce que GSAP change
GSAP introduit la notion de timeline : une séquence d'animations avec un chef d'orchestre. Au lieu d'écrire :
/* CSS — difficile à synchroniser */
.title { animation: fadeIn 0.8s ease 0s both; }
.subtitle { animation: fadeIn 0.8s ease 0.4s both; }
.button { animation: fadeIn 0.8s ease 0.9s both; }Tu écris :
// GSAP — le délai est relatif à l’élément précédent
const tl = gsap.timeline();
tl.from(’.title’, { opacity: 0, y: 40, duration: 0.8 })
.from(’.subtitle’, { opacity: 0, y: 40, duration: 0.8 }, ‘-=0.4’)
.from(’.button’, { opacity: 0, y: 40, duration: 0.8 }, ‘-=0.4’);Le ”-=0.4” signifie : commence 400ms avant la fin de l’animation précédente. C’est d’une lisibilité incomparable.
ScrollTrigger — le game changer
Le plugin ScrollTrigger permet de lier n'importe quelle animation au scroll de la page. Sur ce portfolio, chaque section se révèle quand elle entre dans le viewport :
gsap.from('.skill-card', {
scrollTrigger: {
trigger: ‘#skills’,
start: ‘top 80%’, // déclenche quand #skills entre à 80% du viewport
toggleActions: ‘play none none none’
},
y: 100,
opacity: 0,
duration: 0.8,
stagger: 0.1 // chaque card apparaît 100ms après la précédente
});Ce que j'ai appris
GSAP ne remplace pas CSS. Pour les hover states simples, les transitions de couleur, les focus rings — CSS est toujours le bon outil. GSAP excelle pour tout ce qui est orchestration, séquençage, et scroll-driven.
La courbe d'apprentissage est douce si tu connais déjà JavaScript. La documentation est excellente. Et la version gratuite couvre 95% des besoins d'un portfolio.