Website PreLoader Animation | Page Reveal Animation GSAP | HTML, CSS, JavaScript x Greensock
Summary
TLDRIn 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
🌐 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.
🎨 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.
Mindmap
Keywords
💡Web Design
💡Chat Room
💡Website Loader Animation
💡Block Reveal Effect
💡GreenSock (GSAP)
💡Vanilla JavaScript
💡CSS
💡Viewport Width (vw)
💡Flexbox
💡Stagger
💡Counter Element
💡Fade Out
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]
تصفح المزيد من مقاطع الفيديو ذات الصلة
Create This EPIC Landing Page Reveal Animation In Minutes (GSAP)
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 3
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
The Classic ScrollTrigger Animation That Always Impresses
next.js in urdu - 9 - Navbar Tutorial (Step-by-Step)
Create Portfolio website HTML & CSS only ✅ Part - 1
5.0 / 5 (0 votes)