Hello everyone! Today, we’re going to learn how to create a bubble animation using Tailwind CSS and JavaScript ( and a bit of CSS too).

Original posted on: https://lexingtonthemes.com/tutorials/how-to-create-a-bubble-animation-with-tailwind-css-and-javascript/

What is a bubble animation?

A bubble animation is a type of animation that creates a burst of bubbles that move in a circular motion. It’s a fun and playful way to add some visual interest to your website or app.

The markup

As you can see the markup is pretty simple, only a container for the bubbles and a few CSS rules to make the animation work. We will be injecting the bubbles dynamically using JavaScript.

The body tag

We need to make sure that the body tag has a height of 100% and that the overflow is hidden so the bubbles don’t go outside the viewport.

h-screen: This is a utility class that sets the height property of the element to the height of the viewport.
relative: This is a utility class that sets the position property of the element to relative.
overflow-hidden: This is a utility class that sets the overflow property of the element to hidden.

The container for the bubbles

Id’s

id="bubble-container": This is an id attribute that identifies the element with the id of “bubble-container”. Classes
absolute: This is a utility class that sets the position property of the element to absolute.
inset-0: This is a utility class that sets the top, right, bottom, and left properties of the element to 0.
z-0: This is a utility class that sets the z-index property of the element to 0.

<body class="relative h-screen overflow-hidden">
 <div id="bubble-container" class="absolute inset-0 z-0">
    <!-- Bubbles will be added here -->
  </div>
</body>

The CSS

We are going to write a bit of CSS, yeas, no worries, the CSS is simple a short. The keyframes

@keyframes float: This is a CSS at-rule that defines a keyframe animation.
0%: This is a CSS percentage that specifies the starting point of the animation.
100%: This is a CSS percentage that specifies the ending point of the animation.
transform: This is a CSS property that specifies how an element should be transformed.
translateY(100vh): This is a CSS function that translates the element vertically by 100% of the viewport height.
translateX(0): This is a CSS function that translates the element horizontally by 0 pixels.
translateX(calc(sin(var(--random-offset)) * 50px)): This is a CSS function that translates the element horizontally by a random value between 0 and 50 pixels

The bubble class

position: absolute: This is a CSS property that sets the position property of the element to absolute.
border-radius: 50%: This is a CSS property that sets the border-radius property of the element to 50%.
opacity: 0.7: This is a CSS property that sets the opacity property of the element to 70%.
transition: background-color 0.3s ease-in-out: This is a CSS property that sets the transition property of the element to background-color 0.3s ease-in-out.
will-change: transform: This is a CSS property that sets the will-change property of the element to transform.

@keyframes float {
    0% {
        transform: translateY(100vh) translateX(0);
    }
100% {
  transform: translateY(-100vh) translateX(calc(sin(var(--random-offset)) * 50px));
 }
}
.bubble {
 position: absolute;
 border-radius: 50%;
 opacity: 0.7;
 transition: background-color 0.3s ease-in-out;
 will-change: transform;
}

The JavaScript

The createBubble function

function createBubble(): This is a JavaScript function that defines a function named createBubble.
const bubble = document.createElement("div"): This is a JavaScript statement that creates a new div element and assigns it to the variable bubble.
bubble.classList.add("bubble"): This is a JavaScript statement that adds the class bubble to the bubble element.

Random size between 20px and 80px

const size = Math.random() * 60 + 20: This is a JavaScript statement that assigns a random size between 20 and 80 to the size variable.
bubble.style.width = ${size}px;: This is a JavaScript statement that sets the width of the bubble to the size variable.
bubble.style.height = ${size}px;: This is a JavaScript statement that sets the height of the bubble to the size variable.

Random starting position

const startPosition = Math.random() * 100: This is a JavaScript statement that assigns a random start position between 0 and 100 to the startPosition variable.
bubble.style.left = ${startPosition}%;: This is a JavaScript statement that sets the left position of the bubble to the startPosition variable.

Random duration between 10 and 25

const duration = Math.random() * 15 + 10: This is a JavaScript statement that assigns a random duration between 10 and 25 to the duration variable.
bubble.style.setProperty("--random-offset", Math.random() * 360 + "deg");: This is a JavaScript statement that sets the random-offset property of the bubble to a random value between 0 and 360 degrees.

Apply the animation

bubble.style.animation = float ${duration}s linear infinite;: This is a JavaScript statement that sets the animation property of the bubble to float duration s linear infinite.

Array of Tailwind color classes

const colors = ["bg-[#f1dfd9]", "bg-[#f4c0d8]", "bg-[#c9b0df]", "bg-[#b767d4]", "bg-[#84adc2]", "bg-[#c8589e]"];: This is a JavaScript statement that assigns an array of Tailwind color classes to the colors variable.

Initial color

bubble.classList.add(colors[Math.floor(Math.random() * colors.length)]);: This is a JavaScript statement that adds a random color from the colors array to the bubble element.

Change color every 2 seconds

setInterval(() => {: This is a JavaScript statement that starts an interval that will run the following code every 2 seconds.
bubble.classList.remove(...colors);: This is a JavaScript statement that removes all colors from the bubble element.
bubble.classList.add(colors[Math.floor(Math.random() * colors.length)]);: This is a JavaScript statement that adds a random color from the colors array to the bubble element.
}, 2000);: This is a JavaScript statement that ends the interval.

Add bubble to container

const container = document.getElementById("bubble-container");: This is a JavaScript statement that assigns the element with the id bubble-container to the container variable.
if (container) {: This is a JavaScript statement that checks if the container variable is not null.
container.appendChild(bubble);: This is a JavaScript statement that appends the bubble element to the container element.
}, duration * 1000);: This is a JavaScript statement that ends the timeout.

Remove bubble after animation completes

setTimeout(() => {: This is a JavaScript statement that starts a timeout that will run the following code after the duration variable.
bubble.remove();: This is a JavaScript statement that removes the bubble element from the DOM.
}, duration * 1000);: This is a JavaScript statement that ends the timeout.

Create new bubbles periodically

function startBubbleAnimation(): This is a JavaScript function that defines a function named startBubbleAnimation.

Create initial set of bubbles

for (let i = 0; i < 10; i++) {: This is a JavaScript statement that starts a for loop that will run the following code 10 times.
createBubble();: This is a JavaScript statement that calls the createBubble function.
}: This is a JavaScript statement that ends the for loop.

Continue creating bubbles every 300ms

setInterval(createBubble, 300);: This is a JavaScript statement that starts an interval that will run the createBubble function every 300 milliseconds.

Start animation when the page loads

window.addEventListener("load", startBubbleAnimation);: This is a JavaScript statement that adds an event listener to the window object that listens for the load event and calls the startBubbleAnimation function when the event is triggered.

The complete javascript

function createBubble() {
   const bubble = document.createElement("div");
   bubble.classList.add("bubble");
// Random size between 20px and 80px
   const size = Math.random() * 60 + 20;
   bubble.style.width = `${size}px`;
   bubble.style.height = `${size}px`;
   // Random starting position
   const startPosition = Math.random() * 100;
   bubble.style.left = `${startPosition}%`;
   // Random animation duration
   const duration = Math.random() * 15 + 10;
   bubble.style.setProperty("--random-offset", Math.random() * 360 + "deg");
   // Apply the animation
   bubble.style.animation = `float ${duration}s linear infinite`;
   // Array of Tailwind color classes
   const colors = [
      "bg-[#f1dfd9]",
      "bg-[#f4c0d8]",
      "bg-[#c9b0df]",
      "bg-[#b767d4]",
      "bg-[#84adc2]",
      "bg-[#c8589e]",
   ];
   // Initial color
   bubble.classList.add(colors[Math.floor(Math.random() * colors.length)]);
   // Change color every 2 seconds
   setInterval(() => {
      bubble.classList.remove(...colors);
      bubble.classList.add(colors[Math.floor(Math.random() * colors.length)]);
   }, 2000);
   // Add bubble to container
   const container = document.getElementById("bubble-container");
   if (container) {
      container.appendChild(bubble);
   }
   // Remove bubble after animation completes
   setTimeout(() => {
      bubble.remove();
   }, duration * 1000);
}
// Create new bubbles periodically
function startBubbleAnimation() {
   // Create initial set of bubbles
   for (let i = 0; i < 10; i++) {
      createBubble();
   }
   // Continue creating bubbles every 300ms
   setInterval(createBubble, 300);
}
// Start animation when the page loads
window.addEventListener("load", startBubbleAnimation);

Conclusion

This is a simple tutorial that demonstrates how to create a bubble animation using Tailwind CSS and JavaScript and a bit of CSS too.

Hope you enjoyed this tutorial and have a great day!

/Michael Andreuzza

Creating a bubble animation with Tailwind CSS and JavaScript