1

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!

<div class="timeline-entry" data-entry="0">
  <!-- Some content -->
</div>

<div class="timeline-entry" data-entry="1">
  <!-- Some content -->
</div>

$('[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);
});
DaveMoTron
  • 23
  • 9

0 Answers0