How We Developed and Animated Mr. White Creative Agency’s Webflow-Based Website

Webflow CMS development is one of the latest additions to our long list of services. The popularity of this SaaS solution among businesses has recently been on the rise for two main reasons.  

First, this platform allows anyone without a technical background to run a website and edit its content easily. 

Second, unlike many similar tools (Squarespace, Wix, etc.), Webflow provides access to the underlying code. That enables web developers to create custom layouts and blocks, making websites unique and professional-looking. 

In this post, we discuss a case when our team assisted a creative agency from the United States with building their corporate website by leveraging the customization capabilities of Webflow CMS. 

The Client 

The Mr. White Creative agency is a “group of highly skilled creatives that do big agency level work for clients of all sizes.” The agency provides a wide range of services, including branding, graphic design, photography, UX/UI design, and web design. 

The Challenge 

We were contacted by Michael White, the agency’s Creative Director / Owner, who told us that they had a set of templates for a Webflow website and they needed help building them out. There were eight templates all in all which included a: 

• Homepage 
• What We Do page 
• What We’ve Done page 
• Who We Are page 
• What We’ve Done detail page 
• Scribbles page 
• Scribbles detail page 
• Contact page 

Michael provided the desktop and mobile designs of the pages, giving us free reign to create the tablet versions. 

As for the CMS-based pages, they were only supposed to be the blog pages (the listing page and detail page) and the latest blog post titles on the homepage. The client asked us to make the website’s components as reusable as possible. 

Michael also wanted us to add some animations to the website. Those were mostly simple fade-in/fade-up animations on scroll. The only big animation was the main hero background, which featured a list of the agency’s services that cycled through the screen. 

Another element that Michael requested was the animated filtering of the articles by category on the Scribbles page and the projects by service feature on the What We’ve Done page. 

The Solution

To convert the templates into fully fledged animated web pages, we mostly used the responsive Webflow builder. Whenever the native Webflow capabilities were not enough to translate the client’s idea into reality, we wrote custom HTML/CSS/JS code. 

We also used Webflow CMS to build out the Scribbles listing and detail pages, plus display some blog post titles on the homepage.  

To build out the contact form, we applied the default Webflow Forms functionality. 

For reusable components, we used  components with override fields that were set so that the client could later place unique content for each instance of the component. 

The animated images below illustrate exactly what we did. 

Fade-in/Fade-up Animations on Scroll

Animation on the Homepage with a Cycling List of Services for the Underlined Word 

Filtering on the Scribbles Page 

Scribbles Detail Page

Filtering on the What We’ve Done Page 

Contact Form 

The Outcome 

Michael was satisfied with our performance but did have some comments and update requests when we delivered the work. 

For example, one of his concerns was the way the logos panned across the homepage on the mobile and tablet versions. The movement seemed to be a bit too intense to him, so he wanted us either to place the logos in two rows or apply a lazy load. 

Unfortunately, those options were not viable simply because that was the way that type of animation worked in Webflow. Placing the logos in two rows wouldn’t change anything.

We always offer our clients the best solution for their particular project. In this case, we suggested that we should make a swipe for the logos. The client agreed and we fixed the issue in no time flat. 

Michael also had another request. He wanted to be able to place quotes in specific locations on different blog detail pages. However, since we used the Webflow CMS to build the blog detail pages, it was impossible because the template for every blog post detail was the same and the data was fetched from the CMS.

To resolve the problem, we developed a static page template, which the client can now use to create pages with varying layouts and insert quotes wherever he sees fit. 

To facilitate running the website, we put together a detailed guide for the client. It contains instructions on how to work with CMS Collection Lists/Pages, Symbols, and Interactions.  

Overall, it took us 55 business hours to build and animate the Mr. White Creative agency website. It was broken down like so: 

• Front-end stage: 43 hours 
• JavaScript stage: 5 hours 
• Quality assurance: 7 hours 

The best evidence for us that the client was happy with our efforts was that he returned with another Webflow development project at a later date. 

Want to be our next happy client? Write to us. We’ll be delighted to help.