Comment ajouter un nombre dynamique d'animations, puis les exécuter toutes en parallèle Greensock

Question

J'essaie de trouver un moyen d'ajouter un nombre arbitraire d'éléments à une ligne de temps et, après les avoir ajoutés, de les exécuter tous en même temps. J'ai essayé d'appeler .pause() avant d'ajouter des éléments à la timeline et de les lire ensuite, mais ils commencent toujours avant que j'appelle lecture.

Ce que j'utilise actuellement est ci-dessous. J'ai 2 journaux de console pour imprimer l'heure, ce qui peut indiquer que le code fait réellement ce que je veux puisque le premier console.log imprime toujours 0. Le second imprime toujours 20. Je ne sais pas pourquoi nous sommes à 0 sur la première impression, car si la fonction .pause() ne fonctionne pas, pourquoi ne démarre-t-elle pas dès que j'ajoute un .to dans la boucle .each ?

expand: function(elems) {
    var tl = new TimelineLite();
    tl.pause();
    elems.each(function() {
        this.style.height = 'auto';
        var Height = getComputedStyle(this).height;
        this.style.height = 0;
        tl.to(this, .1, {height:fullHeight}, 0);
        tl.to(this, .5, {opacity:1}, .2);
    });
    var currentTime = tl.time();
    console.log('the current tl time ' + currentTime);
    currentTime = tl.time();
    console.log('the current tl time 2' + currentTime);
    tl.play();

Answer 1

Il est tout à fait possible d'utiliser une TimelineLite/Max pour un ensemble de tweens qui s'exécutent simultanément - cela vous donne un contrôle total sur toutes ces animations avec un seul objet. Aucun problème.

De même, il n'est pas nécessaire de faire une pause() puis une lecture() sur le même tick. GSAP est totalement synchronisé. Peu importe qu'un bloc de code prenne du temps à s'exécuter - GSAP fait correspondre les temps par son ticker interne.

Je suis confus par certaines choses dans votre code et votre question :

1. Votre deuxième console.log() a un "2" codé en dur avant le currentTime, et vous obtenez donc les résultats attendus. En d'autres termes, currentTime était 0 dans les DEUX appels à console.log(). N'est-ce pas ?
2. On dirait que vous faites passer la hauteur de 0 à la hauteur totale en 0,1 seconde et que vous attendez 0,2 seconde pour animer l'opacité (donc 0,1 seconde APRÈS que la hauteur totale ait été atteinte). Était-ce intentionnel ? Je ne sais pas si vous avez réglé l'opacité sur 0 quelque part, mais si c'est le cas, vous ne verrez peut-être jamais l'animation de la hauteur. C'est peut-être ce que vous avez prévu, mais je me suis dit que je devais poser la question.

Vous pourriez simplifier un peu les choses en utilisant une valeur basée sur une fonction pour l'interpolation de la hauteur, comme ceci :

var tl = new TimelineLite();
tl.fromTo(elems, 1, 
  {height:0}, 
  {height:function(i, e) {
      e.style.height = "auto";
      var fullHeight = window.getComputedStyle(e).height;
      e.style.height = "0px";
      return fullHeight;
    }
  });
//we'll start the opacity tweens 0.2 seconds later.
tl.to(elems, 1, {opacity:1}, 0.2);

Voici une démo : https://codepen.io/GreenSock/pen/6e2cadb2764f2417366e7b87567d6002?editors=0010

Si vous avez besoin d'une aide supplémentaire, n'hésitez pas à vous rendre sur les forums à l'adresse suivante https://greensock.com/forums/

Joyeux échange !