Overview A client approached me with a vision to create a 3D interactive animation that visually showcased the evolution of a skyscraper — starting from a simple structure and gradually transforming into a modern high-rise surrounded by an urban landscape. The goal was to deliver a smooth, scroll-driven experience that immerses viewers in the progression of the city’s development.

Challenge Spline 3D, while powerful for creating interactive 3D scenes, doesn’t natively support smooth scroll-based animations. The challenge was to maintain high-quality visuals while ensuring fluid performance across devices and browsers, especially within Webflow’s environment.

Solution I began by designing and animating the entire 3D scene in Spline 3D, focusing on realistic textures, lighting, and spatial composition to enhance depth. To overcome the scroll limitation, I exported each frame of the animation as optimized JPEG sequences, reducing file sizes for faster load times without compromising visual fidelity.

These frames were then integrated into Webflow through a custom setup. I used GSAP (GreenSock Animation Platform) to control the frame sequence based on scroll position, effectively mimicking real-time animation while keeping performance high. An API workflow was implemented to manage and fetch image assets dynamically.

Delivered a seamless scroll-triggered 3D animation with near real-time responsiveness.

Achieved smooth performance despite complex visuals through optimized asset compression.

Created an immersive and interactive urban scene that effectively showcased the client’s concept.

3D Modeling & Animation: Spline 3D

Web Development: Webflow

Animation Library: GSAP

Optimization: JPEG compression, API-based asset management

Key Takeaways This project deepened my understanding of integrating 3D design with web technologies to deliver smooth, high-performance experiences. It demonstrated that with the right workflow, even tools with limitations can produce advanced, interactive results.