Au début du Web, les sites étaient très statiques. Au mieux, il y avait <blink> qui faisait flasher certains mots comme un arbre de noël. Puis vint Flash et les choses se mirent à bouger. Flash est mort et maintenant on utilise JavaScript pour animer les pages Web. Il y a plusieurs bibliothèques JavaScript pour faire de l’animation de site Web, mais celle de GreenSock est probablement la plus rapide, la plus intuitive et celle offrant le plus de possibilités. Toutes les fonctionnalités ne sont pas gratuites. Pour certaines, il faut être membre. Le prix n’est pas faramineux, mais les fonctionnalités gratuites sont largement suffisantes pour ce projet. Nous allons ici réaliser l’animation suivante:

Avant de commencer à coder, je vais ajouter la référence à une police Google pour rendre le projet plus attrayant, et ce, en cliquant sur la roue d’engrenage appropriée

et en ajoutant la référence au CDN voulue, comme dans le précédent article.

Le html est super simple ici, avec deux <div> contenant respectivement le titre et le contenu de notre page, ainsi qu’un autre qui ne sert qu’à créer de l’espace entre les deux. Wikipedia définit ainsi cette balise:

La balise <div>...</div> est une balise générique de cette catégorie qui est souvent utilisé pour réaliser la mise en forme du site sans une signification sémantique particulière.

Wikipedia

Voici donc notre html:

<div class="titre"><p>Sherbrooke 1881</p></div>
    <div style="height: 600px;"></div>
    <div class = "intro">Au tournant du 20e siècle, Sherbrooke est déjà une ville industrielle prospère. Depuis l'arrivée du chemin de fer en 1852, les industries se sont multipliées et ont attiré la main-d'œuvre. D'environ 3000 habitants en 1851, la population passe à 7446 habitants en 1881 pour atteindre 23 522 habitants en 1921. Dès 1897, le tramway est mis en service pour faciliter les déplacements de la population croissante. Crédits: BANQ </div> -->

Les deux <div> qui contiennent du texte sont associées à des classes CSS qui sont définies ainsi:

.titre {
  font-family: 'Pattaya', sans-serif;
  text-align: center;
  font-size: 200px;
  width: 100%;
  position: fixed;
  /*Un élément avec position : fixe  est positionné par rapport à la fenêtre d’affichage, ce qui signifie qu’il reste toujours au même endroit même si la page défile.*/
  padding: 0px;
}

.intro {
  padding: 40px;
  font-family: 'Pattaya', sans-serif;
  text-align: justify;
  color: white;
  font-size: 25px;
  line-height: 35px;
  font-weight: normal;
  justify-content: left;
  align-items: left;
  width: 90%;
  position: relative;
  /*Un élément avec position : relative ; est positionné par rapport à sa position normale. Si vous définissez les propriétés supérieure, droite, inférieure et gauche d’un élément relativement positionné, il sera ajusté en fonction de sa position normale. */
}

J’ajoute aussi dans le CSS les propriétés générales de ma page, notamment la couleur de fond noir:

html, body {
            padding: 0;
            margin: 0;
            background-color: black;
        }

Maintenant vient la partie plaisir, soit l’animation JS. Mais avant, il faut invoquer le plugin de GreenSock en cliquant sur la roue d’engrenage du JS dans Codepen et en ajoutant le CDN suivant: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js

J’aime aussi dans les préférences désactiver l’auto-updating

et à la place cliquer sur le bouton Run quand je suis prêt à voir le résultat.

Une fois cela fait, je crée une variable qui va contenir ce que l’on appelle dans GSAP une timeline. Il s’agit d’une animation en plusieurs étapes. Voyons ça ensemble ligne par ligne:

var animation = gsap.timeline()
/*ma variable est associée à la fonction gsap timeline
qui contient elle même une autre variable nommée animation*/
animation
/*cette variable contient les diverses étapes qui composent mon animation. La première étape consiste en une méthode GSAP nommée .fromTo. 
Comme son nom l'indique, elle permet de définir un état de départ et un état d'arrivée d'un objet ici identifié par sa classe CSS, soit .titre. */
  .fromTo(".titre", {x:0, y:0, color: "red", opacity: 0}, {x:0, y:100, opacity:1, ease: "back(6)", duration:3})
/*donc l'objet .titre a une position initiale définie par ses X et ses Y, soit son positionnement horizontal et vertical. Il a aussi une opacité initiale de zéro, donc il est au départ invisible. Il bouge ensuite verticalement de 100px vers le bas, et devient visible. Le tout pendant une durée de 3 secondes. Le dernier paramètre, ease, permet de définir le comportement, soit ici un effet de rebondissement*/
  .to(".titre", {xPercent:100, duration:2})
/*suite à la complétion de la première animation, on fait disparaître .titre avec la méthode .to, qui l'envoie littéralement 100% plus loin le long de l'axe horizontal, de façon à ce qu'il disparaisse, et le tout prend 2 secondes.*/

Avec .fromTo, si j’ai défini, par exemple ici, la couleur rouge, elle est héritée dans ce qui suit. Je pourrais aussi faire en sorte que le texte change de couleur, en spécifiant deux couleurs différentes pour les deux étapes. Pour ce qui est du paramètre ease, regardez ce vidéo pour comprendre les options:

Voici ce que tout ça donne dans Codepen. Amusez-vous à changer des paramètres, notamment le ease et la durée, pour voir les changements dans l’animation. Consultez la documentation GSAP pour comprendre les diverses propriétés. Un monde de possibilités vient de s’ouvrir…

Possibilities GIFs | Tenor