Menu

Post image 1
Post image 2
1 / 2
1

Building Horeca: Advanced Motion Design in Webflow Without the Performance Trade-Offs | Codrops

Codrops·upgreight·3 months ago
#LyHV4M7r
#tympanus#section#gsap#const#scroll#ismobile
Reading 0:00
15s threshold

Horeca started as a simple landing page, but quickly evolved into something far more ambitious. Text that scales up to fill the viewport and stays pivoted on one specific character. Accordion headers that stick to the bottom of the viewport instead of the top. A feed section where cards come out from deep z-depth toward the camera. A stack of cards, a hover mega menu, and all of it needed to work on mobile without breaking. At the time, achieving this level of motion design required a combination of Webflow and custom GSAP, which eventually grew into around 2,000 lines of animation code. The part most case studies skip is the editing side. It’s easy to build a heavy animation site if you don’t care what happens when the client opens the Designer to change a headline. Stack some absolute positioned divs, bury elements 10 layers deep, hardcode pixel values, done. Looks great in the case study, but it’s a nightmare in production.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More