https://github.com/um-xair/html-css-js-website-animation

🧬 Website Animation using HTML CSS Javascript GSAP | by UM-XAIR
https://github.com/um-xair/html-css-js-website-animation

animation animation-effects animation-js animation-library css gsap gsap-animation html javascript js libraries website website-animation website-design

Last synced: 8 days ago
JSON representation

🧬 Website Animation using HTML CSS Javascript GSAP | by UM-XAIR

• Host: GitHub
• URL: https://github.com/um-xair/html-css-js-website-animation
• Owner: um-xair
• Created: 2024-05-12T03:30:52.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-10-21T06:58:12.000Z (about 1 month ago)
• Last Synced: 2024-10-21T09:53:59.925Z (about 1 month ago)
• Topics: animation, animation-effects, animation-js, animation-library, css, gsap, gsap-animation, html, javascript, js, libraries, website, website-animation, website-design
• Language: CSS
• Homepage:
• Size: 319 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### 🧬 Website Animation using HTML CSS Javascript GSAP | by UM-XAIR










  

  




This repository contains code for creating a website animation using GSAP (GreenSock Animation Platform). GSAP is a powerful JavaScript library for creating high-performance animations.

## HTML Structure

The HTML structure defines the layout of the webpage, including loader elements, navigation, footer, etc.

## CSS

The CSS file (`styles.css`) is linked to the HTML file to apply styling to various elements on the webpage.

## JavaScript (GSAP)

The JavaScript code includes animations using GSAP library. Here's a breakdown of the animations:

### Loader Animation

The loader animation is created using GSAP. Initially, the loader clips (`clip-top` and `clip-bottom`) are animated to expand vertically (`height: "50vh"`) with a duration of 2 seconds and an ease effect of "power4.inOut". The marquee elements inside the loader are also animated to move to the center of the screen (`top: "50%"`) with a duration of 3.5 seconds and an ease effect of "power4.inOut".

### Marquee Animation

The marquee elements inside the loader are animated to move from left to right. The marquee elements inside `clip-top` and `clip-bottom` are animated to move from right to left (`left: "100%"`), while the marquee element inside `clip-center` is animated to move from left to right (`left: "-50%"`). These animations have a duration of 5 seconds and an ease effect of "power3.inOut".

### ClipPath Animation

Finally, the clip path of the loader clips (`clip-top` and `clip-bottom`) is animated to reveal the content underneath. This animation starts after a delay of 6 seconds. The clip path of `clip-top` is animated to `inset(0 0 100% 0)` (revealing the bottom part of the loader), and the clip path of `clip-bottom` is animated to `inset(100% 0 0 0)` (revealing the top part of the loader). These animations have a duration of 2 seconds and an ease effect of "power4.inOut". Additionally, the opacity of the marquee elements is animated to 0 simultaneously (`opacity: 0`) with a duration of 1 second and an ease effect of "power2.inOut".




Inspiration from the [Codegrid YouTube channel](https://www.youtube.com/@codegrid) 🫶




## Collaborate With Me

If you're interested in collaborating or have any inquiries, feel free to reach out via email or WhatsApp!