Sam Mularczyk

Motion and interaction designer

Webflow

Information

Webflow is an all-in-one web design platform that gives designers unprecedented control over layout, functionality and animation - without having to write a single line of code.

They wanted to announce their new ecommerce features with a big splash, so I was brought on board to help them design and build an intro animation for their landing page.

Working closely with Webflow's brand designer Ryan Morrison, as well as their frontend development team, I built the animation in After Effects and exported it to code using Airbnb's Lottie framework. The sequence runs in real time, rendered directly in your browser.

This wasn't as simple as it sounds! Our goal was to ensure that it played well on as many devices as possible, but running a full-screen animation can drastically impact performance. I had to animate with this in mind, finding solutions to problems created by Lottie's technical limitations. This took a lot of trial and error!

The end result was an immersive full-screen animation that immediately creates a lasting impression. Every animation after "Hello Webflow" was created by Ryan through Webflow itself, which is a huge testament to the power of the platform.

After it was released, the page won a CSS Design Award, Awwwards Site of the Day and was featured in Communication Arts.

You can see it in the video above, but I recommend going to the landing page to experience it for yourself.