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