GSAP la timeline


Je vous conseille d'utiliser la timeline pour toutes vos animations, même les plus simples. Cela vous fera gagner du temps ensuite, si vous avez besoin de modifier votre animation ou d'ajouter un élément au milieu de vos actions.

L'utilisation de la timeline est en plus très simple, il serait dommage de s'en priver.

Nous allons animer 3 textes différents qui vont se succéder :
1) bonjour
2) la météo ?
3) il fait beau

ce qui donne :
bonjour
la météo ?
il fait beau !

1 - Inclure la librairie GSAP

Il faut ajouter une ligne de code dans le head du document HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>


2 - Le CSS

L'animation comprend 2 types d'éléments principaux :
- la scène où se déroule l'animation.
- les acteurs, des div qui seront animées

La scène

La scène est en gris dans l'image ci-dessous. Tout ce qui dépasse de la scène est caché : overflow:hidden; Les animations se déroulent par rapport au point d'origine de la scène en haut à gauche pour cela il faut ajouter la position : position:relative;



Les acteurs

Ils sont en position absolue position:absolute; leurs coordonnées seront ensuite changées dans la timeline.

.scene{
    background-color:#efefef;
    width:300px;
    height:100px;
    margin:auto;
    position:relative;
    overflow:hidden; 
}

.acteur{
    position:absolute; 
}

Vous remarquerez que la taille de la scène à été fixée : 300 pixels de large par 100 pixels de haut. elle est centrée grâce à la balise margin:auto;


3 - Le HTML

C'est simple il y a une div "scene" qui contient 3 div "acteurs"
<div class="scene">
    <div class="acteur" style="left:120px; top:-30px;" id="bonjour">bonjour</div>
    <div class="acteur" style="left:-90px; top:40px;"  id="meteo">la météo ?</div>
    <div class="acteur" style="left:310px; top:40px; width:120px;"  id="beau">il fait beau !</div>
</div>

Il est important de donner des id aux acteurs afin de pouvoir les animer ensuite.
Les coordonnées de départ des acteurs sont ajoutées grâce à l'attribut style


4 - Le javascript

<script>
    // si vous souhaitez jouer votre animation une seule fois 
    // décommentez la ligne ci-dessous et la dernière ligne
    //var tl = new TimelineLite(); 
    
    // pour jouer votre animation en boucle
    var tl = new TimelineLite({onComplete:function() {
        this.restart()}
    });

    var bonjour = document.getElementById("bonjour");  
    var meteo = document.getElementById("meteo");
    var beau = document.getElementById("beau");
   
    tl.to(bonjour, 0.5, {top:"40px"});
    tl.to(bonjour, 0.2, {autoAlpha:0}, "+=0.5");

    tl.to(meteo, 0.5, {left:"120px"});
    tl.to(meteo, 0.2, {autoAlpha:0}, "+=0.5");

    tl.to(beau, 0.5, {left:"110px"});
    tl.to(beau, 0.2, {autoAlpha:0}, "+=0.5");

    //tl.play();
</script>
Ici le code va jouer l'animation en boucle. Il est plus facile de repérer les acteurs grâce à des variables d'ou les lignes : var beau = document.getElementById("beau"); Chaque animation est construite sur le même principe. On effectue une translation qui dure 0,5 secondes tl.to(bonjour, 0.5, {top:"40px"});.

Puis l'acteur devient transparent cela dure 0,2 secondes.tl.to(bonjour, 0.2, {autoAlpha:0}, "+=0.5"); Remarquez de "+=0.5" qui signifie que l'animation pour devenir transparent ne commence pas tout de suite (il faut le temps de lire les mots affichés) mais après 0,5 secondes.






La doc Vue.js
A propos

J'exerce depuis plusieurs années le métier de développeur Front-End. Dernièrement j'ai créé ...

Qui suis-je
Qui maîtrise Internet, maîtrise le monde
Jules Cesar