Frontend Art 01 — Blue Circles Animation

The animation is different every time you load the page. The locations the blue circles travel to are completely random. I used HTML, CSS, JavaScript, and jQuery to build this. You can find it live on my website here.

This article is a guide on how to create a similar animation. To keep this explanation concise, I will only cover the significant milestones.

You can find the code on my GitHub here. It may take a few minutes to download because of the videos.

Requirements

• Solid understanding of the DOM, requestAnimationFrame, JavaScript, HTML, and CSS
• Partial understanding of jQuery
• Determination!

Table of Contents

• How I Coded The Blue Circles (minis)
• *BONUS* How I Coded The Blue Circles (minis)
• How I Put The Layers Together

How I Coded The Blue Circles (minis)

From now on, each blue circle will be referred to as a “mini”.

Step 1: Create the CSS for the container that will hold the minis and for the mini itself.

• When we want to make the blue circles fade in or fade out, all we have to do is change the parent container’s opacity to 1 or 0. This switch will be smooth because it has a transition: opacity property.
• The height of each mini is actually 0. Instead, the padding-bottom property gives the mini a “height”. We choose padding-bottom because it is a percentage based on the width of the screen. This way, we can ensure that the “height” of the div is always the same as the width.

Step 2: Create the JS class that will represent each mini DOM element. Each mini has a final location (as top and left position properties), which is one of the edges of the screen. Once it reaches that final location, it calculates a new final location.

• The left, top, width, and height properties are all percentages and represent the current position of the mini
• finalLeft and finalTop represent where the circle will be at the end of the animation (after ANIMATION_DURATION milliseconds) when the circle hits the edge of the screen
• It is important to remember that the this.height property has nothing to do with the CSS. We keep track of this.height as a percentage of the height of the parent container for reasons that will make sense later.

Step 3: Create global variables and options

Step 4: Initialize minis and give them random values

• If the minis are fading away because we disabled the background, then we don’t want to generate NUM_CIRCLES new circles, so we just stop the timeout which would delete all the minis

Step 5: Create the move function to move all the minis

• If we haven’t finished the animation, move all the circles closer to their final destination and call requestAnimationFrame again
• Else if we have finished, reset the starttime of the animation, calculate new final positions for all the minis, and start the animation again

Step 6: Define recalculateFinalPosition found here

The program still won’t work because we never definedrecalculateFinalPosition for the BlueCircle class! This is more complicated than expected because we have to ensure that the new final position of the mini is not too close to the current position of the mini. For example, if the left and top properties of the mini are 10% and 0% , the mini would be in the top-left corner, so the final position of the mini should not be anywhere along the top side or left side of the container. If it is, then the mini would just travel along the edge of the container, which is no fun.
Check my GitHub link here to find this function.

Congrats! You got this far.

*BONUS* How I Coded The Blue Circles (minis)

But our program isn’t perfect, yet.

Bonus 1: Support Resize

What if the user resizes the page?

Bonus 2: Seamlessly Disable Background

If you click the “Disable Background” button, you can see that the minis keep moving as they fade away. If you enable the background before the minis completely fade away, the minis will come back without resetting their position. If you enable the background after they completely fade away, a whole new set of minis will appear instead. This is where resetTimeout and fadingAway come into play.

Improvements

I made this code years ago, before knowing the intricacies of JavaScript. If you would like to improve it, I recommend the following:

• Functional Programming: Our functions have heavy side effects and rely on global variables, which does not follow the functional programming paradigm.
• Debounce: I would recommend incorporating the lodash function “debounce”, which will only trigger the function to adjust the size of our divs after x milliseconds of not calling that function.
• Computation: Having twenty-five divs calculate their new position every animation frame while playing videos is very computationally expensive for the computer. Consider optimizing the algorithm, not using videos, and decreasing the number of minis.

How I Put The Layers Together

This section explains how I added the videos to the animation.

The outermost container, which I called the “What Container”, contains three children, all of which are 100% of the width of the parent. Together, the What Header and What Home sections make up 100% of the height of the What Container.

The What Home div has two children, which are each 100% of the width and height of What Home. The yellow layer contains all the buttons, like the toggle background button. What Home also has the #blue-circles-container.

The Black Underlay contains four <video> elements as children.

Design Symbolism

The circles in the “What I Do” section represent the activities in my life. At the time of creating this, I had four main activities. The size of the bubbles symbolizes how much of my time each activity takes. The minis represent smaller time commitments in my life, like reading books and hanging with friends. I superimposed many layers to create a three-dimensional effect, representing a deeper understanding of me.

Thank you for reading!
If you have any questions, please feel free to reach out to me at:
ymoondhra@gmail.com