Interskillar

Overview

‍

‍

Choosing and Setting up CSS framework

The site is an super complicated site structure with Section stacking on top of each other in a 3d coordinate (depth view). Therefore, the best way to execute this layout is for each section to scale up or down depending on the screen size through View Width unit.

‍

Challenging sections:

Homepage Section Positioning and Zoom Effect.

The most difficult challenge on this project beside its bizzare zooming effect on scroll is a really strict deadline. Thus, the method of structuring that effect need to be effective but also most convenient to edit. In this case, Webflow Native Interaction prove superior to GSAP.

‍
The core value for an effective On Scroll Layout Effect is its HTML DOM structure. In this case, where every section is stacked on top of each other, a wrapper is created to act as the page y-axis to easy construct the animation timeline base on its height (5000vh).

Structuring CSS for this layout surprisingly turn out to be quite easy. Since every section is on top of each other, everything boil down to a Z-index puzzle of which section lay first and which lay behind. In order to look through from one section to the other, an image background is masked out on photoshop and exported in PNG format.

‍

Now come the most difficult part in this challenge. How to set display logic in the middle of Webflow Native timeline for some sections will only appear in a certain point of the page scroll. Usually, GSAP Scroll-trigger would come in handy in dealing with this issue but mixing GSAP with Native Webflow Interaction could result in a more complicated timeline. Therefore, a logic javascript is added in order to pickup the percentage of the page's height (5000vh) on scroll event, then toggling a secondary class for displaying to each section if the percentage is equal to certain number.

Result