DEV Community

Cover image for Create Stunning Gradual Div Reveals with JavaScript setTimeout and CSS Transitions
Hayr Hotoca
Hayr Hotoca

Posted on

Create Stunning Gradual Div Reveals with JavaScript setTimeout and CSS Transitions

Creating a smooth and engaging user experience on the web often involves combining JavaScript and CSS transitions. In this post, we will explore how to use the setTimeout function in JavaScript to gradually reveal elements on a webpage with CSS transitions.

Overview

The goal of this example is to create a series of div elements that fade in one after the other. We will leverage the setTimeout function to control the timing of each element's appearance, while CSS transitions will handle the visual effects.

HTML Structure

We will start by defining our HTML structure. Here’s a simple layout with several divs containing images and links:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gradual Div Reveal</title>
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="toggle-div">
      <img src="https://aws.amazon.com/startups/upload/e4d8d468-90d1-704f-a34e-7e195ce4025a/ceac2e85-dca6-4da4-bbf7-359df7db739d.png" />
      <a href="">perplexity.com</a>
    </div>
    <div class="toggle-div">
      <img src="https://aimode.co/wp-content/uploads/2024/07/meta-ai-logo.webp" />
      <a href="">meta.ai</a>
    </div>
    <div class="toggle-div">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Microsoft_365_Copilot_Icon.svg/2048px-Microsoft_365_Copilot_Icon.svg.png" />
      <a href="">copilot.microsoft.com</a>
    </div>
    <div class="toggle-div">
      <img src="https://www.deepseek.com/favicon.ico" />
      <a href="">chat.deepseek.com</a>
    </div>
    <div class="toggle-div">
      <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/google-gemini-icon.png" />
      <a href="">gemini.google.com</a>
    </div>
    <script src="src/script.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS for Transitions

Next, we will define the CSS styles that will control the appearance and transition effects of our divs:

.toggle-div {
  opacity: 0; /* Start hidden */
  transition: opacity 1s ease; /* Transition effect */
  height: 50px; /* Set a height for visibility */
  background-color: lightblue; /* Background color for visibility */
  margin: 10px 0; /* Spacing between divs */
  padding: 12px 80px;
  display: flex;
  align-items: center;
}

.toggle-div img {
  height: 100%;
  margin-right: 8px;
}

.toggle-div a {
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Explanation of CSS

Opacity: Initially set to 0, making the divs invisible.
Transition: The opacity property will transition over 1 second with an ease effect.
Styling: Basic styling is applied to ensure visibility and layout.

JavaScript for Gradual Reveal

Finally, we will implement the JavaScript logic to control when each div becomes visible:

// JavaScript to reveal divs
const divs = document.querySelectorAll('.toggle-div');

divs.forEach((div, index) => {
  setTimeout(() => {
    div.style.opacity = 1; // Change opacity to make it visible
  }, index * 500); // Delay each div by half a second multiplied by its index
});
Enter fullscreen mode Exit fullscreen mode

Explanation of JavaScript

Query Selector: We select all elements with the class .toggle-div.
forEach Loop: We iterate over each selected div.
setTimeout: For each div, we set a timeout that changes its opacity to 1, making it visible. The delay increases with each iteration, creating a staggered reveal effect.

Here is the final product:

Image description

Check it out: https://playcode.io/2219619

Conclusion

By combining JavaScript's setTimeout function with CSS transitions, we can create visually appealing effects that enhance user interaction. This approach is not only simple but also effective in providing a polished feel to web applications.
Feel free to experiment with different timings and styles to see how they affect the overall user experience!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay