Animating a class of DIVs one after another

[Tinker987]

Hey everybody.
I'm a relative beginner to HTML and to GSAP and I'm stuck.

 

My goal is to create randomly floating particles in the background. Every particle is one div. Now I've been creating these divs with javascript and adding them to a timeline. Every particle will follow a randomly generated curve in the end.
I've been orientating on this tutorial though the language is flash I suppose https://www.youtube.com/watch?v=ZUM0i0DLKk0

 

I have created around 50 divs randomly vertically distributed. Now I want to move them to the right not all at once but one after another. I tried the sequence attribute and several lots of different things but nothing changed anything.

Is there a way to select one of the divs with class "particle" after another and not all at once?
I need to use TimeLines in order to assign the different paths.

 

Thank you!

var tl2 = new TimelineMax();
			
var nestedTL = new TimelineMax();
nestedTL.add(TweenMax.to(".particle",1,{
	x:"+100",
	ease:Quad.easeInOut
}), "sequence");
			
tl2.add(nestedTL, "sequence");

See the Pen hbCir by GreenSock (@GreenSock) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

 

There are a number of stagger methods that allow you to offset the start times of animations on a group of elements:

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/

 

 

however if you need to build individual timelines for each element and play them in sequence your best bet is to use a loop.

 

jQuery's each() method makes it really easy to select a bunch of elements and perform an action on each one

 

var tl = new TimelineLite();

$(".box").each(function(index, element){
  var child = new TimelineLite();
  child.to(element, 1, {x:100})
       .to(element, 0.5, {rotation:360, scale:0});
  tl.add(child);
})

http://codepen.io/GreenSock/pen/OyoWrM?editors=001

[OSUblake]

Nice videos, Carl! Why no JS versions?

[Carl]

Thanks, Blake! You've stumbled into the dark days where MovieClips and appendMultiple() ruled!

The biggest problem is that videos like that (and others) easily took about 3 days to create. We definitely want to have more, its just a matter of fitting them in to the schedule.

[OSUblake]

I really like your bitmap tile grid! And your Code Challenges looked like a lot of fun! Especially with prize giveaways. #GSAPChallenge anyone?