Website PreLoader Animation | Page Reveal Animation GSAP | HTML, CSS, JavaScript x Greensock

Summary

In this tutorial, viewers are guided through creating a captivating website loader animation with a block reveal effect using CSS and vanilla JavaScript. Starting with a dynamic counter, an overlay with 10 bars is styled to cover the viewport. The tutorial progresses to adding a navigation bar, header, and image, with individual letter divs for animated text. CSS is used for layout and aesthetics, while JavaScript handles the counter and animations, including fading out the counter and animating the blocks, header letters, and hero image with staggered effects.

Takeaways

• 🌐 The tutorial is about creating a captivating website loader animation with a block reveal effect using CSS and JavaScript.
• 🔢 A counter will be added to the website, which will be updated dynamically with JavaScript.
• 📐 An overlay with 10 divs styled as bars will be used to create the loader animation, each set to 10% of the viewport width using CSS.
• 🎨 Additional elements like a navigation bar, header section, and hero image will be included to enhance the website's appearance.
• 🎭 The header text will be constructed using individual divs for each letter, allowing for later animation.
• 📝 CSS will be used to reset margins and paddings, set the box-sizing property, and style various elements including the navigation bar and header.
• 🖼️ The hero image will be set to cover the entire width of its parent container with additional padding and margin for visual spacing.
• 📊 The loader's overlay element will be optimized to cover the full viewport, using flexbox to display the bars inline.
• 🔧 JavaScript will be responsible for the counter's functionality, including incrementing its value and creating a random delay for updates.
• 🎭 Animations will be added using GSAP to fade out the counter and animate the blocks, header letters, and hero image with staggered delays.
• 🎉 The tutorial concludes with the completion of the loader animation, showcasing the final animated website elements.

Q & A

What is the main topic of the tutorial in the provided script?

The main topic of the tutorial is how to create a captivating website loader animation with a block reveal effect using CSS and vanilla JavaScript.

What are the initial steps taken in the tutorial to set up the loader animation?

The initial steps include adding a counter to update dynamically using JavaScript and creating an overlay with 10 divs inside as bars, which will later be styled using CSS.

How is the loader's width and height set to ensure it covers the entire viewport?

The loader's width and height are set to 100vw and 100vh respectively, which ensures it covers the entire viewport.

What is the purpose of adding additional elements like a navigation bar and a header section?

The purpose of adding these elements is to prevent the page from appearing empty and to enhance the overall appearance of the website.

Why are individual divs used for each letter of the header text instead of a standard H1 heading?

Individual divs are used to enable the animation of each letter later on using CSS stagger functionality.

What CSS properties are set for the body element to ensure it covers the entire viewport and prevent unnecessary scrolling?

The CSS properties set for the body element include setting the width and height to 100vw and 100vh, applying overflow hidden, and setting the box-sizing property to border-box.

How is the navigation bar styled to remain at the top of the page?

The navigation bar is styled by setting its position to fixed, ensuring it remains at the top of the page, and setting its width to 100% to span across the entire viewport.

What technique is used to align the child divs within the navigation bar?

The flexbox layout is utilized to align the child divs within the navigation bar.

How is the counter element positioned and styled in the JavaScript code?

The counter element is positioned using fixed positioning and styled with a width and height of 100% to cover the entire viewport, with additional flexbox settings to position it at the bottom right corner.

What is the purpose of the 'update counter' function in the JavaScript code?

The 'update counter' function is responsible for dynamically updating the counter value, checking if it reaches 100, and updating the text content of the counter element to reflect the new value with a random delay.

How are the animations for the loader, header letters, and hero image sequenced in the tutorial?

The animations are sequenced by first fading out the counter after a 3-second delay, then animating the height of the blocks with stagger, followed by animating the header letters, and finally animating the hero image.