title: ScrollMagic & GreenSock iterating over group of elements
body: <p>So I have a list of divs that I want to expand and contract as the viewport scrolls, which I have assigned [data-entry] attributes to. The code below will trigger for all elements at once, centred around the first, rather than each individually as they enter/leave the viewport. I've been iterating over this for a couple of hours now and I'm at my wit's end! I've tried setting the ScrollMagic scene outside of the loop but I couldn't get that working either. Help!</p>
  
  <pre><code>&lt;div class="timeline-entry" data-entry="0"&gt;
    &lt;!-- Some content --&gt;
  &lt;/div&gt;
  
  &lt;div class="timeline-entry" data-entry="1"&gt;
    &lt;!-- Some content --&gt;
  &lt;/div&gt;
  
  $('[data-entry]').each(function() {
      var timelineEntryFocus = new TimelineMax();
      timelineEntryFocus.to($(this), 1, {xPercent: 120, scale: 4, yoyo: true, repeat: 1 });
      new ScrollMagic.Scene({
        duration: '90%'
      })
      .setTween(timelineEntryFocus)
      .triggerElement($(this))
      .addTo(ctrl);
  });
  </code></pre>