Use greensock with handlebars

Question

I have a template I made with Handlebars that looks like this:

 <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>

I would like to use Greensock library to animate the rendering of student images. From my understanding about greensock, my code would like like this:

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..

How do I render images based on my template and at the same time loop through all images to animate them?

Answer 1

The first thing you will need to do is to get your template into a valid state so that it can compile. The {{#each student}} tag has no closing tag and makes no sense since you are already eaching over a students object which is presumably an array. Get rid of the {{#each student}} line.

You will render your images by compiling your template and then calling the resultant method with an argument that is a data object containing a students array property. Assuming you would like to inject your students HTML into an element with an id attribute of "Container", the requisite code would look like the following:

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);

Once the new markup has been added to the DOM, we can perform our animation. There is no need to individually add identical animations to our timeline object for each image element in our container. The Greensock API has provides a convenient staggerFrom method which

Tweens an array of targets from a common set of destination values

We need call this method only once, passing a CSS selector that will select all image elements in our container and a stagger number that will be the number of seconds between individual image element Tween starts:

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

I have created an example fiddle.