Nous avons vu précédemment comment créer une animation avec GSAP. Or, notre projet est une storymap et il faut donc que nos animations soient contrôlées par la molette de la souris. Pour ça, nous allons utiliser le plugin ScrollTrigger de GSAP. Il faut donc l’ajouter dans notre pen, de même que le plugin de GSAP.

J’ai conservé les éléments du dernier projet.

<div class="titre"><p>Sherbrooke 1881</p></div>
    <div style="height: 600px;"></div>
    <div class = "intro">Au tournant du 20<sup>e</sup>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.</div> -->
<div style="height: 600px;"></div>

mais j’ai changé le CSS du deuxième <div> pour qu’il soit plus étroit.

  width: 30%;

Dans le JS, j’ai conservé l’animation du dernier post, mais j’ai mis son état initial sur pause:

var animation = gsap.timeline({ paused:true })

Je crée ensuite un événement ScrollTrigger, dont le déclencheur sera l’élément .intro:

ScrollTrigger.create({
    trigger: ".intro",  /*c'est l'élément déclencheur*/
    start: "top center", /*on définit où l'on veut que l'animation soit déclenchée, soit ici au milieu de la page*/
    onEnter: () => animation.play(),/*on utilise la Arrow Function, qui est juste une façon plus courte en JS de définir une fonction; voir https://www.w3schools.com/Js/js_arrow_function.asp*/
    markers: "true" /*permet de visualiser dans Codepen le début et la fin de l'animation; ne pas inclure dans votre projet final*/
    })

Si vous allez voir mon pen, vous verrez que l’animation est maintenant déclenchée par la molette de la souris, soit quand le sommet du <div> .intro arrive au milieu de la page. Il est possible de définir autrement l’endroit où l’animations sera déclenchée. Je vous encourage à consulter la très riche documentation de GSAP sur ScrollTrigger. Je vous invite également à suivre les cours de Carl Schoofs, qui est très bon pédagogue. Il vous en coûtera environ 7$ par mois, mais c’est de l’argent bien investi.

See the Pen Sherbrooke 1881 B by Tristan Landry (@cybergastronom) on CodePen.