10-TexteTextPlugin est un plugiciel (plugin) développé par GSAP permettant d'animer du texte.
Voici par exemple une animation utilisant TextPlugin:
Comme pour tout plugiciel (plugin) GSAP, afin d'avoir accès à ses fonctionnalités, il est nécessaire d'avoir incorporé la librairie GSAP préalablement et d'ajouter ensuite le plugiciel dans le projet.
Pour ce faire, il est possible d'utiliser une des 3 techniques ci-bas :
-
De le télécharger sur le site de
GSAP (bouton Get GSAP), 📥 l'inclure dans votre dossier de projet et ajouter à la fois le fichier
gsap-public/minified/gsap.min.js si ce n'était pas déjà fait. De plus, vous ajouterez le plugiciel
scrollTrigger avec gsap-public/minified/ScrollTrigger.min.js.
Prioriser toujours les versions minifiées qui sont plus performantes lors du chargement de la page. - D'utiliser un Content Delivery Network (CDN) (onglet CDN), comme vous avez l'habitude de faire. Vous devez y cocher la boîte à cocher du plugiciel Text, et plus bas, aller copier les 2 balises script générées (une pour le coeur de gsap et l'autre pour le plugiciel TextPlugin) et les coller dans votre/vos page(s) HTML qui contiendront des animations GSAP.
- De partir des gabarits de base CodePen. Vous devez copier le lien de GSAP Core et celui de Text et, sur votre CodePen via Settings/JS/Add External Scripts, y coller successivement les liens.
Une fois chargé, il est conseillé d'indiquer à GSAP que TextPlugin est disponible en inscrivant la ligne de code suivante:
Remplace le contenu textuel d'un élément du DOM, un caractère à la fois (ou un mot à la fois si vous avez défini le délimiteur : " "). Ainsi, lorsque la transformation est terminée, le texte de l'élément du DOM a été complètement remplacé. Cela signifie également que si vous revenez en arrière ou redémarrez la transition, le texte sera inversé.
Voici un exemple simple de remplacement du texte dans monElement :
Autre exemple:
Il est possible de raffiner le comportement d'une animation de texte. Pour ce faire, il faut utiliser un objet JavaScript {} pouvant contenir plusieurs propriétés et valeurs plutôt qu'une valeur textuelle comme dans l'exemple précédent
Par exemple, convertissons la valeur textuelle de l'exemple en objet.
value
OBLIGATOIRE lorsque text contient un objet {}. C'est le texte de remplacement, comme "Ceci est la suite de l'histoire."
delimiter
Le delimiteur est le caractère qui doit être utilisé pour diviser le texte. La valeur par défaut est "", de sorte que chaque caractère est isolé. Si vous préférez animer mot par mot, vous pouvez utiliser le caractère espace " ". Si vous préférez animer phrase par phrase, vous pouvez utiliser le caractère point ".".
newClass
Une classe CSS qui doit être appliquée au nouveau texte via une balise. Cela permet de différencier visuellement le nouveau texte de l'ancien, par exemple en le mettant en rouge ou en gras. Il suffit de créer une classe dans votre CSS et d'en passer le nom ici.
speed
Ajuste automatiquement la durée de la transition en fonction du nombre de changements dans le texte ; une valeur de 1 est relativement lente, et une valeur de 20 est très rapide. Sans cette fonctionnalité, vous devriez spécifier une durée pour la transition et il pourrait être difficile de deviner ce qui est bon (animer 10 caractères en 2 secondes est TRÈS différent d'en animer 500 dans le même laps de temps). En d'autres termes, speedvous permet de penser davantage en termes de "changements par unité de temps". Techniquement, la formule est "0,05 / speed * changements_de_texte".