WebflowWebflow Enterprise Partner

With tools like Webflow making animation in web design more accessible than ever, it’s important to establish some best practices in order to ensure that animation enriches the user’s experience, rather than spoiling it. As it becomes easier to create a product with animation that distracts from the content or creates an uncomfortable engagement for the user, a number of basic principles will guide us in shaping projects so that the animation enhances the experience.

Consider the User's Attention

A worst-case scenario is an experience that resembles a Cash Booth — those glass boxes that blow dollar bills around, where the participant is tasked with grabbing whatever they can before the time runs out. When a page is over-animated, it can rush a user down the page, forcing them to consume whatever they can as they scroll, perhaps missing out on essential content. This is suboptimal.

The main thing to avoid is creating competition within the page for the user's attention. We don't want to create competition with the static content, where a series of animations draw a user's attention down the page faster than they can engage with paragraphs, headlines or images. And we also don't want two simultaneous animations in two different parts of the page, creating competition for attention and making it hard for the user to intuit where to focus. It's important that animations work in concert with one another and the rest of the content on the page.

Ideally, animation functions as another layer of communication (alongside space, color, shape and size) to create hierarchy for information. It's most useful when it helps a user more naturally find a starting point for engaging with content. For instance, animating an icon above a paragraph, where their eye would naturally lead into reading it, is good animation design. Animating an icon below a paragraph, where they'd skip past or otherwise have to find their own way back to the starting point, is bad animation design.

When done right, animation design should be taken for granted by the user.

Maximize Real Estate

The benefit of digital design is that we can manipulate how the user interacts with our designs in ways that don't have to be static. For instance, if a headline or paragraph is more important, we can use parallax to have it scroll more slowly and stay on the screen longer, increasing the likelihood of the user engaging with the content. If certain information is less important, we can hide it behind a card that may flip on hover, revealing the secondary content. Suppressing secondary content is especially useful on Mobile screens, where sibling content can, for instance, be presented as swipeable slides.

More radical animation, such as moving content across the x-axis while the user scrolls down the y-axis, can be optimal for certain types of data, such as timelines, allowing the user to more naturally read left to right.

Space Matters

It's important to mimic real-world physics within digital animation wherever possible. For instance, if a mobile navigation menu comes in from the right side of the page, it ought to return to that same side of the page when dismissed. Easing can also help to give the impression of real-world physics, as objects entering a page slow to a stop while objects exiting a page accelerate out of view.

Additionally, having content animate from where they initiate helps to provide a natural feeling experience for the user. For instance, if a hamburger menu button is in the top right of the page, the menu itself should animate from one of those sides (top or right). Whenever possible, it's best to leverage where a user's attention is already focused.

Focus On the Veggies

It's tempting to build animations to offset more "boring" content. But the goal shouldn't be to serve desert alongside the vegetables, which is likely to ruin the user's appetite for the page content. Instead, it's best to "sweeten up" the vegetables, making the page content more engaging and easier to focus on. This approach prioritizes things like reveal animations or wayfinding animations over interstitial or cosmetic animations.

Think Ahead

Potential animations should be considered both during the design process, in order to properly space out animations, and during the development process, in order to build out the site in such a way that elements can be animated without disrupting the rest of the design. Animation shouldn't be shoehorned in as a final step. These principles should help you to make the most of Webflow's animation feature set.

Keep It Light

It's important to consider lower-powered devices and to test across a range of devices. Animations that are controlled by (as opposed to triggered by) scrolling tend to be especially taxing on devices that use computation-heavy touch scrolling (particularly tablets, touchpads and lower-end phones). Alpha animation (opacity) is also resource-intensive. So it's important to weigh the computational weight of different animation styles when planning out animations.

When properly considered, animation can add a lot to a project and can provide a better-than-static experience for the user. Indeed, a well-planned animation strategy that considers the user's attention, optimizes content for consumption, and doesn't overwhelm the user's device can provide an experience that feels more natural and intuitive than a static site.

Up next

12 Conclusion

Bringing it all home. Communication, consideration, collaboration.

Take me there