Context

VideoKlub develops and implements projects in the fields of motion picture, commercial film, and sound design. I was asked to bring Fabian Steiner’s Figma designs to life with Webflow, utilizeing tools like GSAP for animations, Swiper.js for dynamic sliders, and Bunny.net for video delivery, along with custom code to maximize performance.

Tools & Methods

I built a scalable style guide using Client-First guidelines and a responsive 12/6 column grid system, employing Finsweet Attributes for CMS filtering and Bunny.net for seamless video transcoding. For UX Animations I used a mix of pure CSS and the new Webflow GSAP integration.

Speed

Optimizing the load time for a large volume of videos was the project's most critical challenge. I used sessionStorage to link homepage clicks to the specific tab in the other page /works and implemented lazy-loading for iframes, achieving a Pagespeed.dev score of 96.

Outcomes & Learnings

Delivered in just 12 working days, the project was managed and tracked on a calendar-based Notion database for smooth and transparent communication.

I learned alot about building video-heavy sites, and that speed is essential to prevent a complex design from becoming a user obstacle.