Scroll-based storytelling (narrative sections)
Ousmane Dembélé
Interactive Web Experience
Ousmane Dembélé
A cinematic interactive web experience that presents Ousmane Dembélé’s football journey through scroll-based storytelling, immersive visuals, motion design, timeline sections, and performance-optimized animations.
- Client
- Concept / Creative Studio Project
- Service
- UI/UX Design + Creative Development
- Timeline
- 3–4 Weeks
- Tech Stack
- Webflow / GSAP / Three.js

Overview
This project is an immersive digital experience designed to narrate the life and career of Ousmane Dembélé. The website transforms storytelling into a cinematic journey, using animations, typography, and interactive transitions to guide users through different stages of his football career.
100%
Immersive Experience
3x
Higher User Engagement
60fps
Smooth Animations
The Challenge
The Problem
Traditional sports websites rely on static content and lack emotional engagement. The challenge was to create a highly engaging, visually striking experience that tells a story while maintaining performance and usability.
The Solution
Our Answer
Designed a scroll-based storytelling experience where each section represents a phase of Dembélé’s journey—from childhood to global football stages. Combined motion design, bold typography, and immersive visuals to create a cinematic feel that keeps users engaged throughout.
The Brief
Client Requirement & How We Fulfilled It
Client Requirement
The client needed an immersive football storytelling website that felt cinematic, emotional, animation-driven, and different from a traditional player profile page. The experience had to keep users engaged, visually communicate the player’s journey, support smooth transitions, and remain responsive and performant across devices.
How We Fulfilled It
We fulfilled the requirement by building a scroll-based narrative experience with full-screen storytelling sections, cinematic transitions, bold typography, motion-led interactions, visual timeline moments, and optimized animations using GSAP/WebGL-style effects. We balanced high-impact visuals with responsive layouts and performance optimization so the experience remained smooth and engaging.
How We Worked
Our Process
- 01Concept ideation (storytelling structure)
- 02Wireframing and visual direction
- 03UI/UX design with strong typography
- 04Animation planning and motion flow
- 05Development with Webflow + GSAP
- 06Testing for performance and responsiveness
- 07Deployment
What We Delivered
Key Features We Built
Cinematic full-screen transitions
High-quality visual storytelling with images and typography
Smooth animations using GSAP/WebGL
Interactive timeline of player journey
Responsive design across devices
Performance-optimized rendering
Outcomes
What Changed For The Client
The difference the finished product made, once it was live.
Transformed static content into an emotional story
Enhanced user engagement with motion design
Created a premium, high-end digital experience
Demonstrated advanced frontend animation capabilities
Live Website
See It Live
Built With
Technologies Used
- Webflow
- GSAP
- Three.js
- JavaScript
- Figma
Keep Exploring


