Verified Metrics

Overview

‍

‍

Choosing and Setting up CSS framework

The overall layout for this project is surely have a clean industrial vibe for it. However, on some of the section, there are still elements that require a smart scalable responsiveness for its interaction to perform best. Therefore, we also use an CSS system with EM as the main unit to easily control the layout on seperate screen size, and contain everything within the resolution of 1920x1080px.

‍

Challenging sections:

A Stunning Preloader and Hero Transition without the help from GSAP

The whole preloader and hero transition load can be execute with GSAP and usually would be the best option we pick to animate HTML Doms. However, one element stand out to require a lot effort on the CSS part and the timing to animate part would be the Circular loading bar. So, we jumped to Webflow Native Animation as the second best option to animate because we could take advantage of one of best feature on Webflow, Lottie Animation. Lottie Animation in Webflow allows user to easily time a pre-animate lottie file in its on the timeline. The animation asset for Lottie in this case can be quickly made using After Effect and upload to Webflow, and after finished setting up the loading CIrcular bar, the rest of the puzzle was only left with perfect positioning and timing

At this moment, the Preloader is 90% complete already. The last issue to solve is to stop the user from scrolling down when the preloader is loading.

‍
This situation can quickly be solved by adding another secondary class to the body, or the page/main wrapper of the whole body, change its overflow to hidden and its height to 100vh. The CSS is set on page setting so the developers/client on this project can still scroll through the body to add and edit content. Finally, an additional custom javascript is added on the page to remove the secondary class on the body at the end of our animation timeline.

Home Hero mouse move interaction

Although looking very complicated, this interaction can easily be done in Webflow Native Animation with the help of custom CSS. Obviously, the most tricky part is how to structure the HTML DOM and style it. For the main vector logo, an image tag would worked out perfectly for it. To accomplished the outline, we place another div behind the main vector logo with the same dimension and masked it with the svg outline only. After ward, another div is being placed inside it to use as the glowing part for the outline. Finally, using the Webflow mouse move animation, we set the position for the glowing div to follow the mouse cursor.