Figma to Webflow with a colour-adaptive logo

My role: Webflow developer

Project description

The detail worth explaining.

The design puts a fixed logo over sections that alternate between light and dark. On paper that looks fine. In a browser it means the logo disappears for roughly half the time a visitor spends scrolling.

So I wrote custom JavaScript that tracks which section sits behind the logo and flips its colour as the boundary passes. The logo stays legible through the whole page, and nobody has to think about it when a new section is added later — the behaviour is derived from the section, not hard-coded per page.

The rest of the build.

The Figma layout rebuilt in Webflow and responsive across desktop, tablet and mobile, with GSAP driving the scroll-based and timeline animations. Those were tuned for performance rather than maximum effect — nothing in the animation layer blocks first paint.

Live site: common-063ce4.webflow.io