Animations Gsap dans un slider Swiper

Un petit tutoriel complémentaire à la série Gsap de notre ami SupaMike (site). Gsap est une librairie JS qui permet de faire de nombreuses animations dans nos sites et il est possible de l'intégrer dans nos sliders Swiper.

Swiper peut interagir avec les évènements comme le changement de slide (slideChange) ce qui permet d'intégrer une animation dès que slide change. Plus d'informations sur ces propriétés sur cette section de la documentation.

Donc dès que les éléments contenus dans votre slider disposent d'une classe, vous lui appliquez l'animation de votre choix (voir la documentation de Gsap).

Dans mon slider de démonstration j'ai ajouté un déplacement vertical (donc axe Y) avec gsap.fromTo(".swip-title", 0.7, {y: "-200px"},{y: "0px"} ); sur mon titre et un déplacement horizontal sur le résumé (axe X) avec gsap.fromTo(".swip-text", 0.9, {x: "1200px"},{x: "0px"} );. Le code fromTo étant de -200px à 0px (position initiale).

Le code complet de ce simple exemple :

swiper.on("slideChange", function() {
  gsap.fromTo(".swip-title", 0.7, {y: "-200px"},{y: "0px"} );
  gsap.fromTo(".swip-text", 0.9, {x: "1200px"},{x: "0px"} );
});

Vous trouverez également beaucoup des sources YouTube ou Codepen avec d'autres exemples comme ceux-ci. Exemple 1, exemple 2, exemple 3.

Ma démonstration est ICI. Et l'intégration de Swiper ICI. Amusez-vous bien 😉