Integrating animation for the ultimate level of content engagement

How animations can elevate your content

Animated web elements have never been easier to create – and when used wisely, they capture and sustain a reader’s attention like little else. Animation within content and editorial design can even help uncover and complement a topic, create a vivid focal point, bring new meaning to a story, and, in longer reads, offer a break between ideas or long blocks of text.

On a basic level, animations catch the eye and encourage people to keep scrolling. Studies have shown that animated motion attracts attention, likely harkening back to our caveman days when we needed to notice a predator moving quickly in order to survive. This can be used to emphasize the most important bits of content at any given time. “The attention-grabbing powers of animation can be used…to reinforce the hierarchy of content and to highlight what’s most important at a specific point in time, ” explains Val Head, Senior Design Advocate at Adobe and author of Designing Interface Animation and The UI Animation Newsletter. “Color, type, and layout can be used to create a static hierarchy, and animation can add to that by reacting to actions or timing that changes what is most important at any given time.”

On top of that, well-used animations can support better understanding of your content, simply explaining complex topics or adding emotion that helps drive your story forward. Illustrator and animator Arina Shabanova, who’s worked at Google, MTV, Bloomberg Businessweek, gives some examples: “Animated infographics can help explain complex terms or processes from the financial sphere, for example, while animated story elements captivate with narration.”

“In a world where people have entire conversations with GIFs, it’s safe to say that design animation is no longer novel. It’s expected, ” Fanguy continues. “And when done right, it can make your website or app easier to use while imbuing every interaction with delightful purpose.”

There’s a lot written out there about the best ways to use animations in UX design for apps or websites – we’re hoping to use our expertise to translate that into best practices for animations in content design. Read on to explore more expert opinions, advice, and inspiration for adding animated elements into your blog post or layout design.

When animating things on the web, it can be helpful to think about how things move in real life in order to create movements that feel natural and enjoyable to the viewer.

According to Head, even though physics doesn’t apply to movement on the web, we still evaluate movement we see on screen based on what we know about the real world. “This is why interface animation that reflects some aspects of the physical world feels more familiar, ” she explains. “And conversely, it’s why interface animation that significantly contrasts with what you see in the physical world without good reason can be so disorienting or unsettling.”

This is why, for instance, elements that move across the page should start slow, move faster, then slow to a stop (the “easing” motion discussed above) rather than moving at a steady pace across the page. In the real world, things don’t just start at their final speed – they have to work up to them! So, if your animations don’t feel quite right, think if there’s a way to make them move more like something in the real world does.

The timing of when an animation starts and speed at which it moves also plays a part in how well it’s perceived by the viewer. For instance, if an animation starts too soon or moves too fast the user may miss it – if it takes a while to start or move slowly, they may scroll past it entirely.

You’ll have to play with what makes sense on your page, but Head recommends 200ms (milliseconds) to 500ms as a good range to start with for animation duration, with the lower end being good for small effects and the higher end better for larger moves.

The size of the animated element also matters when choosing your timing. A good rule of thumb: the smaller the element, the less time it should take to transform. If you make the duration of the movement too long, the animation is more likely to annoy rather than engage a reader. “If the user wants to quickly scroll through the text or find a specific link, slow animation transitions – no matter how beautiful – will only irritate, ” says Shabanova.

The last thing you want is for animations to get in the way of users being able to easily access the content, scroll down the page, interact with any CTAs or other elements. For instance, have you ever landed on an article where the cover animation takes so long you think you’ll never get to read the actual content. “Keep animations short and purposeful, ” suggests Joe Jordan, Creative Director at JK Design. “The last thing someone wants is to have to wait for your fancy button to animate before they can click on it.”

Animations can get in the way of readability, too. “When misused, animations intended to add aesthetic appeal slow down content consumption and get in the user’s way, ” NN/g warns. They suggest being especially cautious when animating text that’s very important to the content. “Text tends to be the main information-carrying content on any website, so it’s critical to remove any friction from accessing it, ” they share. For instance, if you’re animating any text on the page, make sure it shows up quickly upon scroll and that the animation only occurs once – the first time the reader arrives on the page. “Subsequent views (as the user moves up and down the page to review information) should have all content readily available without replaying the animations, ” according to NN/g.

You also want animations to support your content – not distract a reader so much that they don’t get to the meat of the piece. A poorly-placed animation could actually pull a reader away from digesting a valuable piece of content. NN/g explains, “Animated user interface elements are tempting and powerful tools, yet they can easily waste a precious currency: users’ attention and time. Employ animations sparingly and only when they add meaning to the interaction.”

Too many animated elements can also feel overwhelming, motivating a user to jump ship because they’re not having an enjoyable experience on your page. “It’s important to consider how often these animations are to be encountered by a user in the typical journey throughout the site, ” says NN/g. “Seeing a transition effect while scrolling down a long page might be a pleasant surprise once or even a few times; but seeing it multiple times on multiple pages quickly gets repetitive and wears down the user’s patience.” Using animations to surprise and delight in your designs doesn’t work so well if there’s animated movement at every turn.

A good rule of thumb is asking whether the motion is adding something to the content. Head explains, “A key part of designing good UI animations is remembering that adding animation is an opportunity to communicate a little something more. Any motion you add is going to communicate something; it’s really more a question of whether it’s saying what you’d like it to say.”

Like brand mascots, particular animations and motion styles have the potential to become associated with a certain product or company. “Just like typography and color, the animation you use says something about your product and its personality, ” explains Head in Smashing Magazine.

So, just like you would create a style guide for your typography, brand colors, or imagery, you should create one for your animations. Is your brand personality elegant or playful? Friendly or stoic? Energetic or relaxed? Match animation styles to the voice and tone of your overall visual language and identity.

“Intentionally designing common threads in how your animation looks and behaves can help make them feel more consistent, ” says Head. “When you have interface elements that animate in a similar manner on screens of all sizes or platforms, that’s one more thing that can remain constant, even while things like the layout may change.”

“Intentionally designing common threads in how your animation looks and behaves can help make them feel more consistent, ” says Head. “When you have interface elements that animate in a similar manner on screens of all sizes or platforms, that’s one more thing that can remain constant, even while things like the layout may change.”

We’re sure you already do this, but before you publish any visual elements on your site, always make sure to check what they look like on mobile. Adobe shares that 73% of users say it’s important to their reading experience that the content displays well on the device they’re using, and according to WARC, almost three quarters of internet users are expected to access the web (and your content) solely by their smartphones by 2025.

A lot of animations don’t automatically scale down to mobile as well as other images, so you’ll want to take care to check your mobile site to be sure animations look good, aren’t too distracting, and don’t get in the way of usability on a smaller screen. If an animation doesn’t work well on mobile, you may want to change the animation style, provide a different way for the user to interact with it (such as having the animation start on tap instead of automatically), or remove it altogether for the mobile site.

The New York Times is a giant in publishing – and visual journalism and innovative storytelling as well. Beyond its weighty and wide-reaching original reportage, the paper’s branded content efforts have long been acclaimed as some of the best in the business. This wonderfully interactive example from Airbnb uses scroll-activated animation to engage readers of “Via an Island of Hope, A New Home” to the fullest possible extent. Optional audio adds to the overall atmosphere created by the story as well, opening up with the sound of wind and seagulls circulating around Ellis Island – the topic of the article.

As a reader scrolls, images and text come into view and to life, animating and changing to reflect the passage of time – or simply to create more visual interest with effects like zoom and fade-ins. Further down into the story, a map appears, illustrating the various routes immigrant ships would take to the New World, and the many different countries they came from – with fascinating interviews to listen to via click, and in a color palette unique to the design-centric Airbnb brand.

“Much of the consideration around Esquire’s digital identity was based on impact and creating a strong visual aesthetic, ” explains Katja Cho, who led art direction for Esquire’s digital presence. “Esquire.com’s editorial voice is unique and active – engaging in everything from politics to current fashion trends.” And animation comes into play wherever it works best, from long-reads to short-form pieces.

A wild story on “The Great Rikers Island Art Heist, ” for instance, features playful, subtly animated illustrations throughout that work to motivate a reader’s interest while “showcasing the story’s absurdity and capturing the parallels between the Dali aesthetic and the ensuing madness of the case, ” according to Cho.

But the publication uses animation to clarify ideas just as much as to entertain; one of the site’s most highly-searched stories, “How to Tie a Tie, ” teaches readers five looks with the help of handy moving visuals: “illustrated and animated step-by-step instructions of how to tie each style of tie, making the steps fun, clear, and easily digestible with [Zander Abranowicz’s] fun and approachable style.”

Viacom’s latest redesign uses animation in a variety of subtle and not-so-subtle ways to wow its website visitors and blog readership. And since the restructure, the News publication fits right in with all of the company’s main menu offerings. The homepage opens to a flurry of motion with full-width videos of the company’s film and television efforts sliding into view. Each following screen features movement as well, used to highlight the media conglomerate’s array of brands, partnerships, and news.

The site’s content area also runs on animation, with stories appearing into view as a reader scrolls down the page. Clicking into an article reveals yet another dose of animation that unveils the cover image – a nice trick to distract users while content loads – and seen again when suggesting related content at the end of a read. With so much disparate motion, one would think it might annoy. But with Viacom’s expert application, it feels like a natural extension of the site – and an appropriate visual trait for the company’s visual language and identity as a whole.