Web Design Tutorial: Loader Animation with Block Reveal Effect

Introduction

• Focus on creating a captivating website loader animation.
• Tools used: GreenSock (GSAP) and vanilla JavaScript.

Step 1: Setting Up the Loader

• Create a counter to update dynamically with JavaScript.
• Add an overlay with 10 div elements styled as bars.
  • Set widths to 10vw using CSS.
  • Ensure bars cover the entire viewport.

Step 2: Adding Additional Elements

• Include a navigation bar, header section, and an image to enhance appearance.
• Construct header using individual divs for each letter to facilitate animation with GSAP's stagger functionality.

Step 3: CSS Styling

General Styles

• Remove margins and paddings from all elements.
• Set box-sizing to border-box.
• Set body width and height to cover the full viewport.
• Add background color for visual aesthetics.

Navigation Bar

• Position: fixed at the top of the page.
• Width: 100% to span the viewport.
• Use Flexbox for child div alignment.
• Remove default text decoration from anchor tags; customize color and font family.

Header Styling

• Ensure header spans 100% width.
• Use Flexbox for individual letter elements.
• Customize font family, size, color, and line height for letters.

Hero Image

• Set width to match header and add padding/margin for spacing.
• Apply border to image container and ensure it covers its parent completely (width and height set to 100%).

Overlay Element

• Width and height set to cover full viewport.
• Use Flexbox to display the bars inline.

Step 4: Configuring Overlay Bars

• Each bar is set to 10vw width and 100vh height.
• Total of 10 bars ensures they cover the overlay space.

Step 5: Positioning the Counter

• Set counter's position to fixed, covering the entire viewport.
• Position it at the bottom right corner using Flexbox.
• Customize padding, color, and font styles for aesthetics.

Step 6: Implementing JavaScript

• Start Loader Function: Select counter element and initialize currentValue to 0.
• Update Counter Function:
  • Increment current value randomly (1 to 10) until it reaches 100.
  • Use setTimeout for random delay (50-250 ms) between updates.
  • Update counter text content accordingly.

Step 7: Animating the Loader

• Initiate loader animation by invoking start loader function.
• Use GSAP to fade out the counter after 3 seconds.
• Update bar heights and animate with stagger for each block.
• Animate header letters and hero image similarly with stagger.

Conclusion

• The tutorial covers creating an engaging loader animation with visually appealing elements and smooth transitions.