Website Loader Animation Using GSAP | HTML, CSS And GSAP
"Website loader animations" are used in almost every web application. On this topic, we keep coming up with new loading animation ideas. This "Website Loader Animation" is designed by Using HTML CSS and gsap. Because we have already created a lot of animation on the website loader. We have also created a dedicated playlist on website loaders. You must visit that playlist.
In this loading animation, we will have two balls moving along the path while the path remains stationary. The speed of both the balls will be different, so it will take different times to complete the path. This animation is for infinite time. We hope you like it.
You can read interesting articles on web development. The link is given below.
If you want to learn animation using javascript, gsap and plugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. You can visit gsap animations playlist.
01. HTML STRUCTURE
<!DOCTYPE html> <html> <head> <title>Website Loader Animation Using GSAP | Rustcode</title> <link rel="stylesheet" href="style.css"> </head> <body> main content. </body> </html>
02. HTML
To make this loader animation, we have included one external file inside the HTML document. In this loader we have animation, so we have used GSAP library, you can copy and paste this link in the HTML document. For complete details of GSAP visit the official website.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
After including gsap in the HTML document, it will look like this even though we haven't written anything about the loader animation yet.
<!DOCTYPE html> <html> <head> <title>Website Loader Animation Using GSAP | Rustcode</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> main content. <script src="script.js"></script> </body> </html>
This is the main content of the HTML document 'body'.
<body> <div class="container"> <div class="ball-1"></div> <div class="ball-2"></div> <div class="path"></div> </div> </body>
- READ ALSO:
- 01. 35+ Preloader Design For Websites | HTML And CSS
03. CSS
body{ padding: 0px; margin: 0px; display: flex; justify-content: center; align-items: center; height: 100vh; background: #F2EDEB; } .path{ width: 200px; height: 10px; background: #2A2D34; margin-bottom: 80px; border-radius: 6px; } .ball-1, .ball-2{ position: relative; width: 40px; height: 40px; border-radius: 50px; background: white; } .ball-1{ top: 65px; background: #247BA0; } .ball-2{ top: 25px; background: #5C946E; }
04. JAVASCRIPT
new TimelineMax({repeat: -1}) .to(".ball-1", 0.6, { x:180 }) .to(".ball-1", 0.6, { x:0 }); new TimelineMax({repeat: -1}) .to(".ball-2", 0.5, { x:180 }) .to(".ball-2", 0.5, { x:0 });
05. Youtube Video
Here we are attaching a Youtube video from our channel so that you can understand this article better and you can create a better web user interface. We have a lot of videos on our Youtube channel which is related to the user interface and web development. You can also, learn about web development from there.
06. SOURCE CODE
After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.
- RELATED POSTS:
- 01. Simple Blogging Template Design | HTML And CSS
- 02. Single Page Website Design | HTML And CSS
- 03. Profile Card Design | HTML And CSS
- 04. Responsive Side Navbar | HTML, CSS And Javascript
- 05. Smooth Parallax Scrolling | HTML And CSS
- 06. Simple Search Box Design | HTML And CSS
- 07. Add Input Dynamically In Form | HTML, CSS And Javascript
- 08. Equal Height Responsive Column Design | HTML And CSS
- 09. Humburger Menu Icon Animation | HTML, CSS And Javascript
Comments
Post a Comment