Pershing Ventures
Client:
Pershing Ventures
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.