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.