https://github.com/prashantkoirala465/modern-preloader
A sophisticated and visually appealing preloader animation built with GSAP (GreenSock Animation Platform) and modern web technologies. This project demonstrates a smooth, professional loading experience with dynamic progress counting and elegant transitions.
https://github.com/prashantkoirala465/modern-preloader
animation awwards gsapp html-css-javascript loading-animation preloader
Last synced: 8 months ago
JSON representation
A sophisticated and visually appealing preloader animation built with GSAP (GreenSock Animation Platform) and modern web technologies. This project demonstrates a smooth, professional loading experience with dynamic progress counting and elegant transitions.
- Host: GitHub
- URL: https://github.com/prashantkoirala465/modern-preloader
- Owner: prashantkoirala465
- License: mit
- Created: 2025-01-31T01:24:35.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-31T01:27:50.000Z (10 months ago)
- Last Synced: 2025-02-14T11:03:51.807Z (10 months ago)
- Topics: animation, awwards, gsapp, html-css-javascript, loading-animation, preloader
- Language: JavaScript
- Homepage: https://modern-preloader.vercel.app/
- Size: 7.81 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Modern Preloader Animation
A sophisticated and visually appealing preloader animation built with GSAP (GreenSock Animation Platform) and modern web technologies. This project demonstrates a smooth, professional loading experience with dynamic progress counting and elegant transitions.
## Features
- 🎯 Smooth progress counter animation
- 🎨 Modern gradient color schemes
- âš¡ GSAP-powered transitions and animations
- 📱 Fully responsive design
- 🎠Custom text reveal effects
- 🌊 Elegant color wipe transitions
- 🎪 Clean and minimal UI
## Technologies Used
- HTML5
- CSS3
- JavaScript (ES6+)
- GSAP 3.12.2 (Animation Library)
- TailwindCSS (Utility-first CSS framework)
- Space Grotesk Font Family
## Installation
1. Clone the repository:
```bash
git clone https://github.com/prashantkoirala465/Modern-Preloader
cd Modern-Preloader
```
2. Open `index.html` in your preferred web browser.
## Usage
1. Include the required dependencies in your HTML file:
```html
```
2. Add the preloader HTML structure:
```html
0
Loading
```
3. Initialize the preloader:
```javascript
const preloader = new Preloader();
```
## Customization
### Colors
Modify the gradient colors in `styles.css`:
```css
.progress-text {
background: linear-gradient(to right, #ffffff, #818cf8);
}
.colorWipe {
background: linear-gradient(45deg, #4f46e5, #818cf8);
}
```
### Animation Timing
Adjust the animation timings in `preloader.js`:
```javascript
gsap.to(element, {
duration: 1, // Change duration
ease: 'power4.inOut' // Modify easing function
});
```
### Progress Speed
Modify the progress simulation in `preloader.js`:
```javascript
setInterval(() => {
progress += Math.random() * 8; // Adjust increment value
}, 200); // Modify interval timing
```
## Features Breakdown
### 1. Progress Counter
- Smooth number counting animation
- Dynamic opacity based on progress
- Tabular number formatting for consistent width
### 2. Transition Effects
- Color wipe transition between loading and content
- Smooth fade-in animations for content
- Staggered text reveal effects
### 3. Responsive Design
- Fluid typography using clamp()
- Mobile-friendly layout
- Optimized for various screen sizes
## Performance Optimization
- Uses `will-change` for optimized animations
- Implements `requestAnimationFrame` for smooth progress updates
- Efficient GSAP timeline management
- Minimal DOM operations
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgments
- GSAP by GreenSock for powerful animations
- TailwindCSS for utility classes
- Space Grotesk font family by Florian Karsten