ANIMATION DU TEXTE AU SCROLL

Le challenge

Création d'un effet d'apparition de texte au scroll avec HTML5, CSS3, JavaScript et les librairies JS :

• GSAP ET son plugin ScrollTrigger
• Splitting.js
• Lenis

Démonstration

Lien vers le projet : https://aperbet56.github.io/text_scroll_animation/

Projet développé avec

• Utilisation des balises sémantiques HTML5
• CSS3
• Flexbox
• Page web responsive
• Desktop first
• JavaScript
• Code JavaScript commenté
• Animation du texte au scroll via les librairies JS GSAP ET son plugin ScrollTrigger, Splitting, Lenis

GSAP (https://gsap.com/) est une bibliothèque d'animation JavaScript indépendante du framework qui transforme les développeurs en super-héros de l'animation. Créez des animations hautes performances qui fonctionnent dans tous les principaux navigateurs. Le plugin ScrollTrigger de GSAP offre des animations à défilement époustouflantes avec un minimum de code.

Splitting.js (https://splitting.js.org/) est une microbibliothèque JavaScript conçue pour diviser (sectionner) un élément de diverses manières, telles que des mots, des caractères, des nœuds enfants, et plus encore ! La plupart des méthodes de fractionnement utilisent une série de remplis de variables CSS et d'attributs de données déverrouillant des transitions et des animations qui n'étaient auparavant pas réalisables avec CSS.

Lenis (https://lenis.darkroom.engineering/) est une bibliothèque de défilement fluide légère, robuste et performante. Il est conçu par @darkroom.engineering pour être simple à utiliser et facile à intégrer dans vos projets. Il est conçu dans un souci de performances et est optimisé pour les navigateurs modernes. Il est parfait pour créer des expériences de défilement fluides sur votre site Web, telles que la synchronisation du défilement Webgl, les effets de parallaxe et bien plus encore.