Principe

Pour animer chaque lettre à un moment différent, il faut placer chaque lettre dans un span.

Nous allons donc dans un premier temps sélectionner le texte du titre, le transformer en une liste de lettres (un tableau), puis placer chacune des ces lettres dans un span.

Nous utiliserons ensuite timeline de GSAP, qui permet d’appliquer une animation à plusieurs éléments, avec un décalage.

Étapes

1. Installer GSAP

Après avoir démarré un projet, installer GSAP avec NPM:

npm install gsap

Dans le fichier main.js, on importe GSAP:

import gsap from "gsap"

2. Sélectionner l’élément à animer en JS

On créé un élément title:

<h1 class="title">Hello world</h1>

On sélectionne l’élément, puis on l’affiche dans la console du navigateur pour vérifier que ça fonctionne:

...

var title = document.querySelector(".title");
console.log(title);

3. Récupérer le texte du titre

On récupère le texte du titre, puis on l’affiche dans la console du navigateur pour vérifier que ça fonctionne:

...

var title = document.querySelector(".title");
**var titleString = title.textContent;
console.log(titleString);**