🎨

Creating a Captivating Loader Animation

Apr 18, 2025

Web Design and Loader Animation Tutorial

Overview

  • Creating a captivating website loader animation with block reveal effect.
  • Utilizing GreenSock Animation (GSAP) and Vanilla JavaScript.

Steps to Create the Loader Animation

1. Initial Setup

  • Add a counter that will update dynamically with JavaScript.
  • Create an overlay with 10 divs functioning as bars.
    • Set their widths to 10vw using CSS to cover the viewport.

2. Enhancing the Page Appearance

  • Include additional elements to prevent a blank page appearance:
    • Navigation bar.
    • Header section.
    • Image for the header.
  • Construct individual divs for each letter of the header text to enable animation with GSAP's stagger functionality.

3. CSS Styling

  • Reset Styles: Remove margins and paddings from all elements.
    • Set box-sizing property to border-box.
  • Body Styles:
    • Width and height set to cover the entire viewport.
    • Apply overflow: hidden to prevent scrolling.
    • Add background color for aesthetics.
  • Navigation Bar Styles:
    • Set position to fixed at the top of the page.
    • Width set to 100%.
    • Use Flexbox for alignment of child divs.
    • Refine anchor tags by removing text decoration and setting color and font family.
  • Header Styles:
    • Ensure it spans the full width of the container.
    • Use Flexbox to list individual letters.
    • Customize styles of letters (font family, size, color, line height).
  • Hero Image Styles:
    • Set width and height to 100% for full coverage.
    • Add padding and margin for spacing.
    • Apply border to the image container.
  • Overlay Element Styles:
    • Set width and height to cover the full viewport.
    • Use Flexbox to display blocks inline.
    • Each bar within the overlay has width: 10vw and height: 100vh.
  • Counter Positioning:
    • Set position to fixed with width and height of 100%.
    • Use Flexbox to position the counter at the bottom right corner.
    • Apply padding and aesthetic styles.

4. JavaScript Implementation

  • Loader Function:
    • Select counter element with query selector.
    • Initialize currentValue to 0.
  • Update Counter Function:
    • Check if currentValue reaches 100 and exit if true.
    • Increment currentValue by a random number (1 to 10) but not exceeding 100.
    • Update counter display with the new value.
    • Use random delay (50-250 ms) for updates using setTimeout.
  • Initiate Loader Animation:
    • Invoke startLoader function to kickstart the animation.
    • Use GSAP to fade out the counter after 3 seconds.
    • Update height of blocks after fading.
    • Animate header letters with stagger effect after blocks.
    • Animate hero image similarly.

Conclusion

  • This tutorial effectively combines CSS and JavaScript for creating engaging web animations.