Partition Studio

Overview

Partition Studio came to us with their landing page design ready, featuring specific interactions and animations. They want us to convert it from Figma to a stunning website using the Webflow platform. The challenge was to bring their vision to life exactly as they imagined it, with the best SEO practices.

‍

Choosing and Setting up CSS framework

Partition Studio landing page design is in somwhere between standard Industrial Site design and Creative Site with a lot of animation. Therefore, some section would have to stay inside a container with its max-width under 1920px, and some would have to be scalable with view width units for the animations to work best. The solution for it is to use a CSS framework with EM units to easily control the responsiveness through the parent section tag. Custom CSS is applied to define global style for certain tags.
‍

‍
Challenging sections:

Auto-played Varied Content

The most effective an fastest way to accomplish this interaction is to use Webflow native tab component with addition javascript to auto switch between tabs. That way users who browse to this section will have an option of clicking to the next content. Custom CSS was applied for the 3 columns layout and the text-masked loading animation.

‍

The result:

‍

Regional Content

The request for this page pricing table is to have the price in Pound for UK visitors only. In order to accomplish the requirement, Geo JS was applied to filter out UK country by its Country Code Property, and regional content was hidden and shown with condition logic (via javascript). Furthermore, additional logic was applied to make register form appear and auto selected option depend on the click event from the price table

‍

Text Animation

For Text Animation, GSAP was the best library to use because of its Stagger Property. Other library was applied to help structuring html dom for animation such as Split Type and GSAP Scrolltrigger Plugin.

‍

‍