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.

Outlines

00:00

🌐 Crafting a Web Design Tutorial

This paragraph introduces a web design tutorial focused on creating a captivating website loader animation with a block reveal effect. The process involves using CSS and vanilla JavaScript. The tutorial begins by adding a counter and overlay with 10 divs as bars, setting their widths with CSS to cover the viewport. Additional page elements like a navigation bar, header section, and hero image are included to prevent the page from appearing empty. The header text is constructed with individual divs for letter animation using CSS. The tutorial also covers the removal of default margins and paddings, setting the box-sizing property, and applying a background color for aesthetics. The navigation bar is styled with fixed positioning and flexbox, while the header is structured with similar techniques. The hero image is styled to cover the entire width of its container with additional padding and margin for visual spacing.

05:01

🎨 Animating the Loader and Elements

The second paragraph details the animation process for the website loader and its elements. JavaScript is used to implement a counter that updates dynamically. The loader animation is initiated by calling a function that increments the counter value by a random amount and updates the counter display after a random delay. Once the counter reaches 100, it fades out after a 3-second delay. Following this, the height of the overlay blocks is animated with a stagger effect to create a sequential reveal. The header letters are then animated to appear one by one, and finally, the hero image is animated in a similar staggered manner. The paragraph concludes with the completion of the animations, indicating the end of the tutorial.

Keywords

💡Web Design

Web design refers to the process of conceptualizing, planning, and building a collection of electronic files that determine the layout, colors, text styles, structure, graphics, images, and use of interactive features that deliver pages to a user's web browser. In the video, web design is the overarching theme, with a focus on creating a captivating website loader animation, which is a crucial part of the overall user experience.

💡Chat Room

A chat room is an online discussion space where multiple users can interact with each other in real-time by exchanging messages. Although the script does not explicitly discuss chat rooms, the term could be used metaphorically to describe the interactive and engaging nature of the web design being taught, where users can 'chat' or interact with the website through animations and dynamic elements.

💡Website Loader Animation

A website loader animation is a visual effect that is displayed on a website while it is loading content. It serves to keep the user engaged and informed about the loading process. In the script, the tutorial focuses on creating a loader animation with a block reveal effect, which is a specific type of animation where blocks or elements of the page are gradually revealed to the user.

💡Block Reveal Effect

The block reveal effect is a type of animation where blocks or sections of a webpage are animated to appear one after another, creating a dynamic and visually appealing loading sequence. In the video, this effect is implemented using 10 divs inside an overlay, each set to a width of 10vw, to ensure they cover the entire viewport.

💡GreenSock (GSAP)

GreenSock Animation Platform (GSAP) is a powerful JavaScript library for creating high-performance, professional-grade animations. It is mentioned in the script as a tool to animate the loader and other elements on the website. GSAP is known for its ability to handle complex animations with ease, which is why it is chosen for the staggered animations in the tutorial.

💡Vanilla JavaScript

Vanilla JavaScript refers to the use of plain JavaScript without any additional libraries or frameworks. It is mentioned in the script as the programming language used alongside GSAP to create the loader animation. Vanilla JavaScript is chosen for its simplicity and direct control over the web elements.

💡CSS

Cascading Style Sheets (CSS) is a stylesheet language used for describing the presentation of a document written in HTML or XML. In the video, CSS is used to style various elements such as the navigation bar, header section, and the overlay with divs. CSS properties like 'width', 'height', 'flexbox', and 'background color' are mentioned to enhance the visual aesthetics of the page.

💡Viewport Width (vw)

Viewport width (vw) is a relative unit of length in CSS that represents 1% of the width of the viewport. In the script, the overlay's divs are set to a width of 10vw each, which means they will collectively cover 100% of the viewport's width, creating a full-screen loader animation.

💡Flexbox

Flexbox is a layout model in CSS that provides an efficient way to distribute space among items in a container, even when their size is unknown or dynamic. The script mentions using flexbox to align child divs within the navigation bar and to display the blocks within the overlay element inline, which helps in creating a responsive and well-organized layout.

💡Stagger

In animation, 'stagger' refers to the effect where elements are animated one after another with a specific delay between each animation, creating a sequence. In the script, the stagger functionality of GSAP is used to animate the blocks, header letters, and hero image with delays, making the animation more dynamic and engaging.

💡Counter Element

A counter element is a UI component that displays a numerical value, often used to show progress or count down. In the video, a counter is added to the webpage and updated dynamically using JavaScript. The counter is used to show the loading progress, and its text content is updated to reflect the current value, which is incremented in a random manner to simulate loading.

💡Fade Out

Fade out is a common animation effect where an element gradually becomes transparent and disappears from view. In the script, the counter is animated to fade out after a delay of 3 seconds, signaling the end of the loading process and the beginning of the next animation sequence for the blocks and other elements on the page.

Highlights

Introduction to creating a captivating website loader animation with a block reveal effect using CSS and JavaScript.

Starting with a counter that updates dynamically using JavaScript.

Adding an overlay with 10 divs as bars to cover the entire viewport.

Setting the widths of the divs to 10vw using CSS for the loader.

Preventing the page from appearing empty by adding a navigation bar, header section, and an image.

Using individual divs for each letter of the header text for later animation.

CSS reset to remove margins and paddings, and setting box-sizing to border-box.

Styling the navigation bar with a fixed position and full width using flexbox.

Customizing anchor tags by removing text decoration and setting font properties.

Structuring the header with full width and flexbox for letter elements.

Styling individual letters within the header for unique font properties.

Enhancing the hero image with width, padding, margin, and a border.

Setting the overlay element to cover the full viewport with flexbox for block display.

Positioning the counter with fixed position and flexbox for bottom right corner placement.

Implementing JavaScript code to play the counter animation.

Using a random number to increment the counter value and ensure it does not exceed 100.

Creating a delay for counter updates with a random value between 50 and 250 milliseconds.

Initiating the loader animation with a fade-out effect for the counter after 3 seconds.

Animating the blocks with stagger to create a specific delay between each block's animation.

Animating the header letters with stagger to reveal them after the blocks animation.

Final animation of the hero image in the same staggered manner as the other elements.

Transcripts

welcome back to code grid folks brace

yourself for an exciting Journey as we

delve into the realm of web design and

chat room in this tutorial you'll

discover how to craft a captivating

website loader animation with a block

reveal effect using some simple green

sock and vanilla JavaScript so without

wasting much time let's dive right into

it

[Music]

we'll kick off by adding a counter with

plans to update it dynamically using

JavaScript next we will add an overlay

with 10 divs inside as bars later we

will set their widths to 10bw using CSS

ensuring that they cover the entire

viewport web now that we've completed

the loader part let's add some

additional elements to prevent our page

from appearing empty to enhance the

overall appearance we'll include a

navigation bar a header section and an

image

for the header instead of using a

standard H1 heading we'll construct

individual divs each containing a letter

of the header text this technique will

enable us to animate the letters later

on using green socks stagger

functionality

foreign

for the CSS let's begin with our usual

routine by removing margins and paddings

from all elements and setting the Box

sizing property to border box for the

body element we'll set the width and

height to cover the entire viewport and

apply overflow hidden to prevent

unnecessary scrolling additionally We'll

add a background color to enhance the

visual Aesthetics of our page to style

our navigation bar we'll set its

position to fixed ensuring it remains at

the top of the page additionally we'll

set its width to 100 to span across the

entire View Board to align the child

divs within the navigation bar we'll

utilize the power of flexbox

thank you

to refine the appearance of our anchor

tags we'll remove the default text

decoration we'll also set a desired

color in font family to enhance the

visual Style

to structure our header we'll set its

width to 100 to ensure it spans the

entire width of the container we'll also

re-employ flexbox to list the individual

letter elements to add style to our

individual letters within the header

we'll customize the font family font

size color and line height properties to

enhance the hero image we'll set its

width to match the width of the header

with some additional padding and margin

for visual spacing

additionally we'll apply a border to the

image container

[Music]

the image should cover the entire width

of its parents so we will set width and

height to 100 percent

to optimize the overlay element we'll

set its width and height to cover the

full viewport ensuring it occupies the

entire screen space additionally we'll

utilize flexbox to display the blocks

inline

foreign time we'll configure each bar

within the overlay to have a width of 10

viewport width and a height of 100 VH

given that we have 10 bars in total this

setup will ensure that they collectively

cover the entire overlay element to

position the counter we'll set its

position fixed we'll also configure it

to have a width and height of 100 to

ensure it covers the entire viewport so

that by utilizing flexbox we can easily

position the counter at the bottom right

corner using Flex set don't forget to

unpaint the color padding and font

styles to make it look aesthetic

foreign

let's implement the JavaScript code

responsible for playing the counter

inside the start loader function we'll

Begin by selecting the counter element

using query selector we'll also

initialize a variable current value with

an initial value of 0. next we Define

the update counter function within this

function we check if the current value

has reached 100 if it has we exit the

function otherwise we increment current

value by a random number between 1 and

10 using four to ensure the counter does

not exceed 100 We Set current value to

100 if it goes over that value we update

the text content of the counter element

to reflect the new current value to

create a delay between each update of

the counter we generate a random delay

value between 50 and 250 milliseconds

using floor we then use set timeout to

call update counter again after the

delay finally we call update counter

once to kick start the animation to

initiate the loader animation we invoke

the start loader function to add the

animations we will use GSAT to slowly

Fade Out the counter after a delay of 3

seconds as a starting point once the

counter Fades out we will update the

height of the blocks remember to add the

Stagger so that each block animates with

a specific delay in between

later we will animate the header letters

with some stagger to be revealed after

the blocks animated

finally we animate the hero image in the

same manner

that's it

[Music]