Utilisez GreenSock avec guidon

Question

J'ai un modèle que j'ai fait avec Guidons qui ressemble à ceci:

<script type="text/x-handlebars-template" id="student-template"> 
     {{#students}} 
      <div class="clearfix"> 
      {{#each student}} 
       <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
       <img src="{{imgSource}}" title="{{studentName}} /> 
       </div> 
      </div> 
     {{/students}} 
    </script> 

Je voudrais utiliser la bibliothèque GreenSock pour animer le rendu des images d'étudiants. De ma compréhension GreenSock, mon code aimerait comme ceci:

var timeline = new TimelineLite(); 
timelime.add(TweenLite.from($currentImage, 1, {y: 100})); 
timelime.add(TweenLite.from($nextImage, 1, {y: 100})); 
timelime.add(TweenLite.from($nextnextImage, 1, {y: 100})); 
.. and so on for all images.. 

Comment puis-je rendre des images basées sur mon modèle et à la même boucle de temps à travers toutes les images pour les animer?

Answer 1

La première chose à faire est de mettre votre modèle dans un état valide afin qu'il puisse être compilé. La balise {{#each student}} n'a pas de balise de fermeture et n'a aucun sens puisque vous êtes déjà sur un objet students qui est probablement un tableau. Débarrassez-vous de la ligne {{#each student}}.

Vous allez générer vos images en compilant votre modèle, puis en appelant la méthode résultante avec un argument qui est un objet de données contenant une propriété de tableau students. En supposant que vous souhaitez injecter vos étudiants HTML dans un élément avec un attribut id de « conteneur », le code requis ressemblerait à ce qui suit:

var raw_template = document.getElementById('student-template').innerHTML; 
var template = Handlebars.compile(raw_template); 

var data = { 
    students: [ 
     { 
      imgSource: 'https://placekitten.com/g/120/120', 
      studentName: 'John Doe' 
     }, 
     { 
      imgSource: 'https://placekitten.com/g/120/120', 
      studentName: 'Jane Doe' 
     } 
    ] 
}; 

document.getElementById('Container').innerHTML = template(data); 

Une fois que le nouveau balisage a été ajouté au DOM, nous pouvons effectuer notre animation. Il n'est pas nécessaire d'ajouter individuellement des animations identiques à notre objet Timeline pour chaque élément d'image dans notre conteneur. L'API GreenSock a fournit une méthode staggerFrom pratique qui

Tweens un tableau de cibles à partir d'un ensemble de valeurs communes destination

Nous avons besoin d'appeler cette méthode une seule fois, le passage d'un sélecteur CSS qui sélectionnera tous éléments d'image dans notre conteneur et un numéro de décalage qui sera le nombre de secondes entre l'élément d'image individuelle Tween commence:

var timeline = new TimelineLite(); 
timeline.staggerFrom('#Container img', 1, { y: 100 }, 0.25); 

J'ai créé un exemple fiddle.