Niveau 1 : Les bases de GSAP
Découvre les fonctions essentielles .to() et .from() pour créer tes premières animations.
Exercice 1.1 : Animation .to()
En attenteCrée une animation qui déplace le carré de 300 pixels vers la droite en 2 secondes.
BOX
Indice :
Utilise
gsap.to(element, {x: valeur, duration: durée})
JavaScript
Exercice 1.2 : Animation .from()
En attenteFais apparaître le cercle depuis l'opacité 0 avec une échelle de 0.5, en 1.5 secondes.
Indice :
Avec
.from(), tu définis l'état de départ. Les propriétés sont opacity et scale.
JavaScript
Exercice 1.3 : Rotation et scale
En attenteAnime le carré pour qu'il tourne de 360 degrés et double de taille en 2 secondes.
SPIN
Indice :
Combine
rotation (en degrés) et scale (1 = taille normale, 2 = double).
JavaScript
Niveau 2 : Délais et durées
Apprends à contrôler le timing de tes animations avec delay et duration.
Exercice 2.1 : Animation avec délai
En attenteDéplace le carré de 250px vers le bas après un délai de 1 seconde, en 1.5 secondes.
WAIT
Indice :
Ajoute
delay: 1 dans les paramètres. Pour le déplacement vertical, utilise y.
JavaScript
Exercice 2.2 : Animations séquentielles
En attenteCrée deux animations : le texte apparaît d'abord (opacity 0→1, 1s), puis se déplace vers la droite après 1 seconde de délai (x: 200px, 1s).
GSAP
Indice :
Tu dois écrire DEUX animations
gsap séparées. La deuxième aura delay: 1 pour démarrer après la première.
JavaScript
Exercice 2.3 : Ease et vitesse
En attenteFais rebondir le cercle vers le bas (y: 150) en 1 seconde avec l'effet "bounce.out".
Indice :
Ajoute le paramètre
ease: "bounce.out" pour l'effet de rebond.
JavaScript