Staggering Elements under a div

[webfeak7 0 Likes (Newbie)]

Hey I have a website which generates posts and I was wondering if I could use the stagger animation to Tween them from opacity 0 to opacity 1 on page load. The amount of elements differs since the website is dynamic. It is structured as follows.

<div id="message-container">

<div class="message1">

<div class="message2">

<div class="message3">

etc...

</div>
I want to animate the divs with class .message<insert number>. Is there a way to do this by targeting the child elements of the message container and then doing the stagger effect on that?

[Peleg S 19 Likes (Newbie)]

Yeah its possible. 
The best thing is if the children div's will have a unique class name. In your case each div has a diffrent class name (message1,message2..), best thing is to give them a common class name, and then staggering them.
But if you know that all of the child elements are messages you can easily do something like this:

TweenMax.staggerFromTo($('#message-container').children(),0.4,{alpha:0},{alpha:1},0.2)

here's a codepen:

See the Pen avits by bazooki (@bazooki) on CodePen

 

Hope this helps =)

[webfeak7 0 Likes (Newbie)]

Thank you so much