Pour cette étape, vous allez déclencher une animation d’entrée sur chacune des <section> du site.

Aperçu du résultat 👇

Requis

  1. Incorporez GSAP et ScrollTrigger sur votre site.

  2. Utilisez ScrollTrigger afin de déclencher une animation lorsque chaque <section> de votre page entre dans la zone visible de la fenêtre.

  3. L'animation doit être une timeline et animer minimalement deux éléments par <section>(ex: la section en soit, le titre, les éléments avec la balise img, etc.)

  4. L'animation doit-pouvoir être jouée dans les deux sens. Autrement dit, les <section> doivent apparaitre lorsque la page défile vers le bas et les <section> doivent disparaitre lorsque l'on défile vers le haut.

  5. Les outils markers et le GSDevTools ne doivent pas être visible lors de la remise.

N'hésitez pas à être plus original que l'exemple fourni.