Silvia Yu
Client:
Silvia Yu
Webflow Animation
GSAP
Custom CSS
Finsweet Attributes
Overview
Choosing and Setting up CSS framework
Taking a look at the design, with the minimalism design style, the design use a lot of blank space and large font-size for the text content. Therefore, the scalable CSS based on view width units would best fitted to structure this layout.
Challenging sections:
Portfolio Section
The most difficult challenge on this is to structure the portfolio with pop-ups section most organized and easy for the client to go through and edit the contents inside each pop-up. Usually, a well-structured CMS + HTML DOM is the best approach for these type of layout. Unfortunately, CMS is not an option in building this project so everything is have to be depended on well-organized HTML DOMs. For each Experience Pop-up, their default display is set to none, and with an option of adding a second class to change it back to flex, the client can view the content inside the pop-up and edit it without breaking the interaction condition set before.
We want to go one-step further with the micro interaction for this project, so the hover state for this section would need an eye-catching animation and the most efficient way to achieve that here is with custom CSS. Using Custom CSS, we can target and animate varied layers of child components inside the parent component that is being hovered.
Page Navigation
This project page navigation micro-interaction is a proof that Custom CSS often turned out to be the best way to animate simple interaction. Each link hover state can be applied a custom CSS style to animate the line inside it. Since Webflow Native already has the logic to add a "current" second class to the navigate link, the only part left is to override the animation in its hover state.
Text and other Animation
Text animation for this project is preplanned by the client with a provided reference. After analysis that animation, the best option to execute it is GSAP and GSAP Scrolltrigger Plugin, plus a few Custom CSS beside to masked 2 layers from the text. Moreover, since we already installed GSAP on this project, we decided to add some extra movement a few images or vector elements to make the whole personal site way more astounding but professional at the same time.