Figma to Webflow with seamless page transitions
Olga Travnikova
Project description
The problem.
The Figma design only works if the transitions work. Every page was drawn as a continuation of the one before it — but Webflow reloads the document on every navigation, which flattens that into separate pages with a white flash between them.
Approach.
Barba.js keeps the browser from doing a full reload, so an outgoing animation can hand off to the incoming page and the site reads as one continuous move. GSAP drives the load, scroll and transition timelines on top of that.
Underneath, the Figma layout is rebuilt pixel-for-pixel on a class system that scales across breakpoints rather than per-page overrides — cheaper to maintain, and the reason later edits do not break the layout. Custom JS and CSS cover what Webflow interactions cannot reach, and the animation layer is tuned so it never costs page speed.
Live site: next-level-b9d515.webflow.io
Like this project
Posted Aug 17, 2026
Pixel-perfect Figma to Webflow with Barba.js transitions, so moving between pages reads as one continuous animation instead of separate loads.
Likes
0
Views
1
