Trigger Timeline When In Viewport

[skwisgaar]

Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. 

I have a timeline that I created. The timline is not really that important. Just in case though:
 

var tweenArticle = new TimelineMax()

.from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0)

.from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0);

 

This is the site I am trying to put it on: http://webshowcase.tk/wp1/?page_id=114 
This is a wordpress site and what I am trying to do is affect every post on the page. 
When The article is in the viewport I would like to start animating just the elements in that article and if possible reverse but reverse is not super important at the moment.
 

I can't seem to figure out how to get my timeline to play when the article is in the viewport. Any help would be greatly appreciated. Thank you. 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Glad that you're enjoying GSAP so much and the blog looks very good.

 

What you could do is record the offset position of the post container, so when the scroll gets to that position you can trigger the corresponding animation.

 

Another choice could be superscrollorama, a very neat jQuery plugin made by John Polacek that has a lot of features and could help you made all this a lot easier, since it can start an animation when you reach a certain anchor:

 

http://johnpolacek.github.io/superscrollorama/

 

Well you'll see that there's an major upgrade:

 

http://janpaepke.github.io/ScrollMagic/

 

Rodrigo.

[skwisgaar]

I tried with scroll magic (superscrollorama's newest version). The problem I ran into though was that when I reach the trigger which is the classname for the article (article.food) all posts with the classname animate at the same time as soon as I reach the first element with that classname.

The first article is used as the trigger instead of every article having it's own individual trigger. As far as I know the only way around that would be to create a new scene for each post which isn't really what I want to do since the number of posts are variable. 

I am googling .offset() right now. I am worried about running into the same problem though. Would I have to create an iteration for every element with the classname and use "this" as the trigger? Are there any tutorials or codepen examples you know of that could get me in the right direction?

Thanks for responding, Rodrigo. 

[Rodrigo]

Mhh, that's a bit of an odd issue. Any particular reason why you're doing it with classes?. This will basically force you to go through the articles index by creating a jQuery object that contains all the articles.

 

Also looking at the blog it might be a solution. I noticed that every <article> element has an <a> tag with a "food-read-more" class in it. The URL that this element has is unique for every article(thank WordPress for that ), there lies the key for this. You can loop through the articles, find that <a> tag and get that URL. Then you can split that URL in order to strip everything but the unique identifier, in this case the article number. Finally you can add an ID to your <article> tag with that particular number, like that every element will have a unique ID which you can use to trigger the animation when the scroll reaches that particular point.

var articles = $("article");

$.each(articles, function(i,e)
{
  var aTag = $(e).find(".food-read-more");

  $(e).attr( "id",aTag.attr("href").split("p=")[1] );
});

Like that you could use the anchor feature of srcoll magic.

 

Rodrigo.

[skwisgaar]

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. 

[skwisgaar]

Hi all! For anybody looking at this thread after talking with Jan through github I found a solution for this problem using Scroll Magic. Essentially it is the same code that I pasted in my previous comment with the exception of using find(). 

Jan pointed out to me that I was trying to select the children in the wrong way and that's why it wasn't working. Here is the finished code:
 

$('article.food').each(function(){
var currentArticle = $(this);


var tweenArticle = new TimelineMax()
.from(currentArticle.find('section > header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut}, 0)
.from(currentArticle.find('section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut}, 0);

var scene = new ScrollScene({triggerElement: currentArticle, triggerHook:.3})
.setTween(tweenArticle)
.addTo(controller);

});

$(this).find() was the correct way of selecting the children. So now the above code triggers the animation for whatever article is in the view port.

Also, thank you Rodrigo for your taking time to help me.