This project wasn’t for a client — it was a technical exploration of integrating Spline 3D animations with Webflow. Inspired by Apple’s sleek visual storytelling, I used fictional tech products (iPhone and smartwatch) to test how far I could push interactivity and visual fidelity using only Webflow’s tools alongside Spline embeds.
The result is a highly visual and interactive layout that mimics real-world product showcases, giving me space to test both hover-based interactivity and scroll-driven animation reveals.
iframe and controlled through custom Spline settings.
Embedding interactive Spline scenes inside a responsive layout was the main challenge. Maintaining full interactivity across all devices - especially aligning the aspect ratio of Spline elements with Webflow containers - took some trial and error.
Additionally, synchronizing scroll animation precisely with the 3D transition moment (e.g., when the watch disassembles) required tuning Spline’s animation settings and Webflow’s scroll offset triggers until they lined up perfectly.
This project helped me understand the limits and possibilities of 3D Webflow integrations, especially around performance, layout control, and animation timing. I also explored how to structure a visually compelling product story using minimal design — with the animation doing most of the heavy lifting. Most importantly, I gained practical experience in how Webflow and Spline can work together to produce real-time interactivity on the web.
