https://github.com/prashantkoirala465/interactive-hero-canvas-animation
A sophisticated, frame-by-frame animation system for the Doze Studio website, featuring scroll-triggered animations and professional-grade JavaScript architecture.
https://github.com/prashantkoirala465/interactive-hero-canvas-animation
animation awwwards-app-replica awwwards-inspired css gsapp html5 javascript scrolltrigger smooth smooth-animations tailwincss
Last synced: 3 months ago
JSON representation
A sophisticated, frame-by-frame animation system for the Doze Studio website, featuring scroll-triggered animations and professional-grade JavaScript architecture.
- Host: GitHub
- URL: https://github.com/prashantkoirala465/interactive-hero-canvas-animation
- Owner: prashantkoirala465
- Created: 2025-08-24T14:30:39.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-24T14:36:10.000Z (11 months ago)
- Last Synced: 2025-08-24T19:39:14.506Z (11 months ago)
- Topics: animation, awwwards-app-replica, awwwards-inspired, css, gsapp, html5, javascript, scrolltrigger, smooth, smooth-animations, tailwincss
- Language: JavaScript
- Homepage: https://interactive-hero-canvas-animation.vercel.app
- Size: 44.7 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Doze Studio - Interactive Canvas Animation
A sophisticated, frame-by-frame animation system for the Doze Studio website, featuring scroll-triggered animations and professional-grade JavaScript architecture.
## 🚀 Project Overview
This project demonstrates advanced frontend development techniques including:
- **Frame-by-frame animation system** with 1345+ image frames
- **Scroll-triggered animations** using GSAP ScrollTrigger
- **Canvas-based rendering** with proper scaling and centering
- **Professional JavaScript architecture** following senior software engineering best practices
## 📁 Project Structure
```
Doze-Studio-Practise/
├── images/ # Animation frames (1345+ JPEG files)
│ ├── frame_0001.jpeg
│ ├── frame_0002.jpeg
│ └── ... (frame_0001.jpeg to frame_1345.jpeg)
├── index.html # Main HTML file
├── script.js # Refactored JavaScript application
└── README.md # This documentation
```
## 🏗️ Architecture Highlights
### Modular Design
- **IIFE (Immediately Invoked Function Expression)** for encapsulation
- **ES6+ Class-based architecture** with `DozeStudioAnimation` class
- **Configuration-driven approach** with centralized constants
- **Separation of concerns** with dedicated methods for each responsibility
### Professional Code Quality
- **Comprehensive error handling** with graceful fallbacks
- **Input validation** and boundary checking
- **Consistent naming conventions** (camelCase, descriptive names)
- **JSDoc documentation** for all public methods
- **Strict mode** enforcement (`'use strict'`)
### Performance Optimizations
- **Efficient image preloading** with progress tracking
- **Canvas optimization** with proper image smoothing
- **Event listener management** with proper binding
- **Memory management** through proper cleanup
## 🔧 Key Features
### Animation System
- **Frame progression** synchronized with scroll position
- **Smooth transitions** between animation states
- **Responsive canvas rendering** with proper aspect ratio handling
- **Scroll-triggered animations** for UI elements
### Canvas Management
- **Dynamic resizing** on window resize events
- **Image scaling** with maintain-aspect-ratio logic
- **Centered positioning** for optimal visual presentation
- **High-quality rendering** with image smoothing enabled
### Error Handling
- **Graceful degradation** when dependencies are missing
- **Comprehensive logging** for debugging and monitoring
- **Fallback behaviors** for critical failures
- **User-friendly error messages**
## 🛠️ Technical Implementation
### Dependencies
- **GSAP (GreenSock)** - Professional animation library
- **ScrollTrigger** - Scroll-based animation triggers
- **Locomotive Scroll** - Smooth scrolling implementation
- **Tailwind CSS** - Utility-first CSS framework
### Browser Support
- **Modern browsers** with ES6+ support
- **Canvas API** compatibility
- **CSS Grid/Flexbox** support
- **Responsive design** principles
### Maintainability Features
- **Configuration constants** for easy customization
- **Modular method structure** for easy testing
- **Clear separation** of concerns
- **Comprehensive documentation** with JSDoc
- **Consistent code style** and formatting
### Testing & Debugging
- **Console logging** for development debugging
- **Error tracking** with detailed error messages
- **Performance monitoring** capabilities
- **State inspection** methods for debugging
## 🚀 Getting Started
1. **Clone the repository**
```bash
git clone https://github.com/prashantkoirala465/Interactive-Hero-Canvas-Animation
cd Interactive-Hero-Canvas-Animation
```
2. **Open in browser**
- Serve the files through a local web server
- Open `index.html` in a modern browser
- Ensure all image files are present in the `images/` directory
3. **Development setup**
- Use a local development server (e.g., Live Server VS Code extension)
- Monitor browser console for any errors
- Test responsive behavior across different screen sizes
## 🔍 Customization
### Animation Timing
Modify the `CONFIG` object in `script.js`:
```javascript
const CONFIG = {
FRAME_MAX_INDEX: 1345, // Total number of frames
ANIMATION_SCRUB_DURATION: 3, // Animation smoothness
CANVAS_SCALE_FACTOR: 0.5, // Canvas scaling values
// ... other configuration options
};
```
### Animation Sequences
Customize the timeline in the `buildAnimationTimeline` method:
```javascript
timeline
.to(this.frames, this.createFrameUpdate(100), TIMELINE_LABELS.FIRST)
.to(SELECTORS.ANIMATE1, { opacity: 0, ease: 'linear' }, TIMELINE_LABELS.FIRST)
// ... add more animation sequences
```
## 📖 API Reference
### Public Methods
- `loadFrame(index)` - Manually load a specific frame
- `getCurrentFrame()` - Get current animation state
- `resizeCanvas()` - Force canvas resize
### Event Handling
- **Window resize** - Automatic canvas resizing
- **Scroll events** - GSAP ScrollTrigger integration
- **Image loading** - Progress tracking and error handling
## 🎯 Performance Considerations
- **Image optimization** - Ensure JPEG files are properly compressed
- **Memory management** - Large numbers of images require careful memory handling
- **Scroll performance** - Smooth scrolling with large content areas
- **Canvas rendering** - Optimized for 60fps performance
## 🔮 Future Enhancements
- **WebGL rendering** for better performance
- **Lazy loading** for image frames
- **Animation presets** for different use cases
- **Performance analytics** and monitoring
- **Accessibility improvements** for screen readers
## 📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
## 👨💻 Author
**Prashant Koirala**
---
*Built with modern web technologies.*