That is very cool. Didn't know you could do that Wouldn't I still have to create a new scene for every article though specifying the trigger point as the article's new ID number? I am kinda new to jQuery but knowing some JavaScript definitely helps interpret some of it. I tried to do something like this
$('.article.food').each(function(){
var currentArticle = $(this);
var tweenArticle = new TimelineMax()
.from($(currentArticle +' > header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0)
.from($(currentArticle + ' > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0);
var scene = new ScrollScene({triggerElement: currentArticle, triggerHook:.5})
.setTween(tweenArticle)
.addTo(controller);
scene.addIndicators();
});
trying to give every article it's own start, end, and trigger. I think there is something wrong in my code probably this part $(currentArticle + ' > ') . I really want it to react to the current article in the viewport and not the articles id or nth position in case I change the number of posts on the page or add an infinite scroll or load more.