Creative Coding Club

Here's a 2 minute overview of my reaction and coding response to a fun animation challenge.

When I first saw the tweet from @TomPop99 with this animation I thought it was just 2 rings of circles rotating very close to each other.

Upon further inspection I realized that each individual circle appeared to be following a figure 8 path (or infinity symbol).

Although it looked a bit simplistic something about it drew me in and I couldn't help but wonder how I would build it.

Would I need an SVG path or advanced trigonometry?

As I started to follow one circle around the "path" I realized it was following a very circular motion.

I couldn't resist, so I built a bare-bones test of a single circle rotating 360 degrees twice but with a different transformOrigin for each rotation.

In the demo above you can click anywhere to hide the red radius line.

This red lines shows how far the circle is from its transformOrigin.

Be sure to look at the animation code and see how the black circle is only rotating twice as part of a repeating timeline.

Rotating Multiple Circles Twice

When you run the demo above you'll notice that the circles appear to form a continuous "snake of circles".

However, we can get this same code to very closely match the TomPop version with one simple edit!

Edit the Code

The CodePen above has editable code.

Open the js panel and change the last line of the forEach loop (line 21) to

main.add(tl, index * 0.1)

One simple change and a totally different result!

HSL Color Change

If you want a little more info on why each circle has a different color check out my HSL color tip!

Demo

If you love creating coding tips like these and want to dive deep in the GreenSock Animation Platform:

• Subscribe to my YouTube channel
• Follow me on Twitter