Overview
A pixel-perfect recreation of the award-winning Zentry gaming platform, showcasing advanced GSAP animations, Three.js 3D elements, and immersive scroll-driven experiences.
The Problem
Modern gaming websites need to feel as immersive as the games themselves. Static pages don't capture the energy and excitement that gamers expect. The challenge is creating that immersion without sacrificing performance.
Why I Built This
When I first saw the Zentry website, I was blown away. I spent hours trying to figure out how they achieved certain effects. Rebuilding it from scratch was the best way to truly understand advanced web animation techniques.
Tech Stack & Why
GSAP
Industry-standard animation library with ScrollTrigger for scroll-driven effects
React.js
Component-based architecture for managing complex animation states
Three.js
WebGL-powered 3D graphics for immersive visual elements
ScrollTrigger
GSAP plugin for precise scroll-based animation control
CSS 3D Transforms
Hardware-accelerated perspective and rotation effects
Challenges & Solutions
Complex Scroll Sequences
The original site has intricate scroll-driven animations where multiple elements animate in choreographed sequences.
Built a timeline orchestration system using GSAP's timeline feature. Each scroll section has its own timeline with precise scrub values. Used ScrollTrigger's pin feature for section locking during animations.
3D Performance
Three.js scenes were causing significant frame drops, especially on pages with multiple 3D elements.
Implemented level-of-detail (LOD) switching, frustum culling, and lazy initialization. 3D scenes only render when in viewport. Achieved stable 60fps even with complex geometries.
Smooth Video Integration
Background videos needed to sync perfectly with scroll position without buffering issues.
Pre-loaded video segments and used requestAnimationFrame for frame-accurate seeking. Implemented fallback to image sequences on slower connections.
Architecture
- Animation Core: GSAP with ScrollTrigger for scroll-driven effects
- 3D Layer: Three.js scenes with optimized geometries
- Video Layer: Scroll-synced video playback system
- Component Layer: React with animation state management
- Performance Layer: Intersection Observer for lazy loading
Key Features
Results & Impact
Achieved visual parity with the original award-winning site
Consistent 60fps on modern devices
Page weight optimized to under 3MB
Featured in GSAP community showcase
What I Learned
GSAP's timeline feature is essential for complex choreography
ScrollTrigger's scrub property creates magical scroll effects
Three.js requires careful optimization for web
Character-by-character text animation creates premium feel
What's Next
Interested in working together?
I'm always open to discussing new projects and opportunities.