https://github.com/manineedtosleep/character_files-v2
Interactive character gallery with smooth hover-to-video transitions and expanding panels. Built with HTML, CSS, JavaScript and GSAP animations.
https://github.com/manineedtosleep/character_files-v2
bootstrap css-animations front-end gsap hover-effects interactive-gallery javascript responsive-design video-transitions web-development
Last synced: 29 days ago
JSON representation
Interactive character gallery with smooth hover-to-video transitions and expanding panels. Built with HTML, CSS, JavaScript and GSAP animations.
- Host: GitHub
- URL: https://github.com/manineedtosleep/character_files-v2
- Owner: ManINeedToSleep
- Created: 2024-12-16T18:06:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-23T01:13:10.000Z (about 1 year ago)
- Last Synced: 2025-04-08T11:51:38.346Z (about 1 year ago)
- Topics: bootstrap, css-animations, front-end, gsap, hover-effects, interactive-gallery, javascript, responsive-design, video-transitions, web-development
- Language: HTML
- Homepage:
- Size: 46.7 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Character Showcase - Interactive Gallery
A responsive, interactive character gallery with hover effects, video transitions, and smooth animations built with HTML, CSS, JavaScript, and GSAP.
## Features
- **Hover-to-Expand Effect**: Character panels expand when hovered
- **Image-to-Video Transition**: Static images transition to videos on hover
- **Animated Text Overlays**: Character descriptions appear with a smooth animation
- **Responsive Design**: Adapts to different screen sizes
- **GSAP Animations**: Uses GSAP for smooth entrance animations and transitions
## Technologies Used
- HTML5
- CSS3 (with advanced animations and transitions)
- JavaScript
- GSAP (GreenSock Animation Platform)
- Bootstrap 5
## How It Works
1. Static images are displayed initially
2. On hover, the panel expands and transitions to video
3. Text overlay animates in from the bottom
4. Videos automatically play when hovered and pause when mouse leaves
## Learning Points
This project demonstrates several CSS and animation techniques:
- CSS transitions and transforms
- Positioning with absolute and relative elements
- Z-index layering for complex overlapping elements
- Linear gradients for text readability
- GSAP for sequence animations
- Video control via JavaScript events
## Setup and Usage
Simply open `index.html` in a browser to view the project.
### Dependencies
- Bootstrap 5.3.3
- GSAP animation library (loaded via CDN)
## Project Structure
```
/
├── index.html # Main HTML file
├── style.css # Custom styling
├── script.js # JavaScript animations and interactions
├── package.json # Project dependencies
└── assets/ # Images and videos
└── Characters/ # Character media files
```