IZZY 3D Product Experience Website
Dmitrii Metelev
IZZY - Scroll-Driven 3D Product Experience
High-performance Webflow implementation with Three.js WebGL rendering and GSAP ScrollTrigger for a modern urban mobility brand.
Role: Lead Webflow & Creative Developer (Figma → Production)
Collaborator: Kopytok.xyz
Tools / Skills:
Webflow, Three.js, GSAP, ScrollTrigger, JavaScript, WebGL, Performance OptimizationIZZY is an innovative urban micro-mobility brand. Collaborating with Kopytok.xyz, my role was to turn an ambitious, motion-heavy Figma design into a responsive, high-performance production website.
The core challenge was orchestrating a complex, scroll-driven 3D scooter experience directly inside Webflow while maintaining a solid 60 FPS across desktop, tablet, and mobile devices without overheating mobile GPUs.
Key Technical Challenges & Solutions
1. Scroll-Driven 3D Pipeline (Three.js + GSAP ScrollTrigger)
Rather than relying on heavy pre-rendered video scrubs, we implemented a real-time WebGL canvas:
Camera Rig & Pathing: Synced the Three.js perspective camera with GSAP ScrollTrigger, animating position, rotation, and focal targets dynamically along custom spline paths tied to native page scroll.
Asset Optimization: Decimated high-poly CAD models into an optimized GLB/glTF asset with DRACO compression, reducing initial payload while preserving metallic PBR textures and lighting reflections.
2. Mobile & Mid-Range Device Performance Tuning
Running interactive 3D on mobile devices often leads to frame drops, battery drain, and thermal throttling. I implemented strict performance guardrails:
Adaptive Pixel Ratio: Capped
devicePixelRatio dynamically based on screen resolution and device GPU tier (clamped to max 1.5x–2x to prevent 4K/Retina rendering stalls).On-Demand Rendering & Caching: Paused the WebGL render loop when the canvas was outside the viewport (using
IntersectionObserver) and rendered frames only during scroll/interaction events.Touch-Friendly Fallbacks: Adjusted camera rotation easing and scroll distances specifically for iOS Safari and Android Chrome to avoid rubber-banding and scroll-jacking bugs.
3. Webflow Architecture & Multilingual Scalability
Clean Class System: Built using standard modular class naming (Client-First principles), allowing marketing teams to update content without touching custom code.
Localization Ready: Configured structure to cleanly support multilingual content switching across European markets without duplicating 3D logic or breaking layout anchors.
Custom Code Delivery: Isolated 3D logic and GSAP triggers into clean, modular scripts loaded asynchronously to avoid blocking the main thread during initial DOM load.
The Outcome
Flawless 60 FPS: Smooth scroll-driven 3D animations running seamlessly across modern laptops and smartphones.
Pixel-Perfect Fidelity: 100% adherence to Kopytok’s original Figma design, interactions, and typography.
Need a Technical Partner for Your Next Build?
Have an upcoming project with complex interactions, 3D, or tight Figma-to-Webflow deadlines?
Get in touch on Contra or reach out directly at dmitry@flowmetelev.com.
Like this project
Posted Sep 16, 2026
Developed a scroll-driven 3D product experience website for urban mobility brand IZZY using Webflow and Three.js.
