Case Study

Figma-to-Webflow Service

Building complex and creative layouts for a recruitment firm website.

The client

Interskillar

Design

Polish Studio

Webflow Development

SA-C

Date of completion

2023

The Brief

Step 1

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

The Process

Step 1

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

Step 2

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

Step 3

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

The Results

Key Highlights

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

Pershing Ventures

Client:

Pershing Ventures

View Site

Webflow Animation

Custom CSS

Finsweet Attributes

Swiper JS

GSAP

Overview

Choosing and Setting up CSS framework

After analyzing the design, we realize that the designer use a moderately small aboard for the layout. Therefore, the CSS framework approach for this project is a full-out scalable CSS for every screen size. The ratio of the original design would be on both HD screen (1920x1080px) and 2k or 4k monitor screen.

Challenging sections:

Structuring a Preloader with GSAP

With the help of GSAP, adding a javascript logic in the middle of the animation timeline become way too comfortable. We use SplitType JS library to split all the texts on hero section to multiple span tags base on the phase line and structure them in variables to easily re-use when structuring GSAP animation. Afterward, the animation is plan out in After Effect and was mimicked by GSAP timeline features. We also add a secondary class to the body to change it position to overflow hidden so the user cannot scroll when the preloader is loading, then, we add a javascript at the end of our GSAP timeline to remove that class. FInally, we decided for the preloader to load about 1.5 time faster when it on mobile screen and the task can be completed with GSAP matchMedia feature.

Auto Swich Slides Slider

There are multiple ways to build an automatic slider in Webflow, but for this specific situation, we went with Webflow Native Slider due to its convient nature. The hardest part to custom is to build a circular loading bar around each navigate button. Luckily, this turned out to be quite simple with Custom CSS. The whole CSS styling and animation can be found on any CSS library online when searching for CSS loading bar. To apply it on Webflow Slider, we use before and after pseudo classes to create the static and moving circular outline, and take advantage of Webflow pre-built active button logic to hide and shown its pseudo classes. Finally, the animation timing for one navigate link will be equal to Slider Animation Duration + Timer Delay which can be set and adjusted on the setting tab.