Better way to animate in large amounts of circles?

[Just_Jack]

I'm trying to animate in a few circles and have them fade in from left to right one at a time. So far I've written the following:

 

gsap.to(".circle1", { duration: 2, autoAlpha:1 });

gsap.to(".circle2", { duration: 2, autoAlpha:1 });

gsap.to(".circle3", { duration: 2, autoAlpha:1 });
gsap.to(".circle4", { duration: 2, autoAlpha:1 });

gsap.to(".circle5", { duration: 2, autoAlpha:1 });

gsap.to(".circle6", { duration: 2, autoAlpha:1 });
gsap.to(".circle7", { duration: 2, autoAlpha:1 });

 

See the Pen gOBLOXr?editors=1111 by just_ja (@just_ja) on CodePen

[GreenSock]

I think you could simplify your setup quite a bit by just assigning a common "circle" class to your elements and using a single tween. You can use a stagger quite easily. I wasn't sure what you meant by "from left to right" - do you want to move things left to right? Here's my crack at what I assume you may have meant: 

See the Pen OJBbVEK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There are actually quite a few ways you could do something like this, but I didn't want to overwhelm you with options. 

 

Does that help?