Overview A client approached me with the goal of creating a 3D interactive animation that visually depicts the transformation of a skyscraper — beginning as a simple structure and evolving into a towering high-rise surrounded by a modern urban environment. The objective was to design a scroll-driven experience that immerses viewers in the story of architectural growth and city development.

Challenge While Spline 3D excels at modeling and animation, it lacks native support for smooth, scroll-based interactivity. The challenge was to translate a heavy, real-time 3D sequence into a high-performance, fluid animation inside Webflow, ensuring smooth playback across all devices and browsers without losing visual quality.

Solution I crafted the entire scene in Spline 3D, paying close attention to lighting, realism, and depth to capture the city’s evolution. To overcome performance limitations, I exported every animation frame as optimized JPEG sequences, maintaining quality while reducing load times.

Next, I integrated the frames into Webflow using a custom setup powered by GSAP (GreenSock Animation Platform). The scroll position dynamically triggered the frame sequence, producing a visually continuous animation effect. To streamline content delivery, I implemented an API-based workflow for managing and fetching assets efficiently.

Delivered a seamless, scroll-triggered 3D experience with real-time responsiveness.

Achieved optimized performance and fast load times without compromising detail.

Produced an immersive urban animation that effectively visualizes architectural progression.

3D Modeling & Animation: Spline 3D

Web Development: Webflow

Animation Framework: GSAP

Optimization: JPEG compression & API asset management

Key Takeaways This project showcased the power of blending 3D design with front-end development. It reinforced my ability to turn technical constraints into creative opportunities—demonstrating that, with the right workflow, even complex 3D animations can run seamlessly on the web while maintaining cinematic quality.