duplicating animation

[Redgood]

Trying to duplicate the whole thing a bit to the right, and then again and again until it creates this girating 60s background!

I'm really new at this, so sorry if it's a really simple question!

See the Pen Powwpmq by rengoodc (@rengoodc) on CodePen

[ZachSaucier]

Hey Redgood and welcome to the GreenSock forums! 

 

You're using a really old version of GSAP there. Why learn the old stuff? Let's bring this project up to speed! 

• I'm going to use GSAP 3. It has an improved syntax and some other good features that previous version of GSAP didn't have.
• I'm going to make use of more variables to it's easier to edit and keep things in sync.
• I'm going to rotate all of our droplets at the same time to save some animation energy.
• I'll put more comments in the code itself so you can follow along with what I'm doing.

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

 

However, depending on the effect you want, we can continue to improve things. For example, if we can don't care about letting the droplets fall before filling up the screen we can do this:

 

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

 

However, animating this many DOM elements isn't a very good idea. If you're going to do this in production I would highly recommend using <canvas> instead because you can just paint them and it's much easier on computer's processors.

 

Let me know what questions you have!