Animated web elements have never been easier to create – and when used wisely, they capture a reader’s attention like little else. Animation within content and editorial design can 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.
“You need to carefully consider and select animation techniques within a particular post, according to its theme, the content itself, and the rhythm of the text,” says illustrator and animator Arina Shabanova, who’s worked on projects for Google, MTV, WeTransfer, Bloomberg Businessweek, Paramount Comedy, and Esquire Russia. “Animated infographics can help explain complex terms or processes from the financial sphere, for example, while an animated story will captivate a child with narration.”
On a basic level, they catch the eye, grab attention, and encourage people to keep scrolling. Whatever the content in question may be, the wonder of movement – when applied in the right way – casts a spell on an audience and enhances the reading experience.
Read on for expert opinions and best practices you can use when adding scroll-activated animations or other animated elements into your blog post or landing page layout design:
This post was designed with Setka Editor, a new editing plugin for publishers who care about high-quality content. Learn more about Setka Editor or try it for free.
Engage your audience from the get-go
Designed with Setka Editor
An attractive, animated cover image glues the eye to the page like little else, establishing an immediate connection with the viewer while motivating readers to keep scrolling in hopes of discovering more material to engage and delight.
The above is an example from a Hopes & Fears article that explores the diverse typography found along the 13-mile stretch of Manhattan’s most famous thoroughfare: Broadway. As the story loads, the cover image display evokes a train station’s departures board, the characters falling away to finally reveal the English alphabet in its entirety, each letter in a different typeface found along the New York City street.
If there’s an opportunity to show off without confusing your readers, go for it.
Designed with Setka Editor
The success of this kind of effort relies on a stellar piece of content, and the article that follows – a fascinating look at the lettering that makes New York City what it is – does deliver. But, keep in mind: you don’t always have to pull out all the stops above the fold. Instead, do what makes sense for the piece of content at hand.
If there’s an opportunity to show off a bit without distracting or confusing your readers, then by all means, go for it. Otherwise, a more subtle approach – with pulsating arrows or other smaller yet active elements that encourage users to scroll down – might be more appropriate.
Bring your story to life
Designed with Setka Editor
Simple moving animation effects can make standard visuals vivid and interactive, and scroll-activated effects can be great for things like vehicles or screengrabs, for instance, along with other creative ideas.
“Think of each animation as a story,” advises Joe Jordan, Creative Director at JK Design. “It should be easily digestible and guide the user to elements you want them to see in a certain order.” The travel personalization service How to Prague does this in a variety of subtle and not-so-subtle ways.
To start off with, the landing page opens to an inviting GIF that places the viewer in the middle of a bustling city street with people who are clearly enjoying themselves. Scrolling down activates a cute tram that crosses your path as the app view fades into focus. As a reader makes their way through the page, smaller animated elements continue here and there as moving headlines or images. All this makes for a great-looking example of all kinds of animation capabilities, working in harmony when used wisely and sparingly.
Tip: “GIFs are a great way to immediately glue a reader’s attention,” says Setka Art Director Sergii Rodionov. “But be careful to keep them under 2MB, otherwise people won’t stick around waiting for the visual to load. Use lighter GIFs and cinemagraphs as well, which animate certain parts of an image. This works to highlight a particular function, directing reader focus to important details.”
Try layering imagery + animations
Designed with Setka Editor
“For ‘The woman who can feel every earthquake in the world,’ initially, we only used static photographs and GIFs,” explains Alex Averin, front-end developer at Setka. “But after animating some of the images, we came to quite an interesting and complex effect.
“In our editor, it’s possible to create a grid, which consists of a fixed background image onto which one may add others. Here, we added two separate GIFs, which we set up to animate upon scroll. As a result, we achieved a static background, on top of which images and GIFs could fly out or pull up in an attractive, relevant, and engaging way.”
Make images and GIFs come into view in an attractive, relevant and engaging way.
Clarify complex ideas
Some of the most successful animated elements aren’t there for mere decoration; they actually help readers learn and understand the material at hand. In the article above, scrolling down from the ominous cover image triggers a zoom into a map of Eastern Europe, showing the route from Moscow to St. Petersburg.
Some readers may think the animation stops there, but the route is replicated to the left of the body text, highlighting each span of road as the reader delves deeper into the story – each section of which correlates to a place along the way. Image gallery sliders and videos work alongside to offer an even deeper contextual understanding.
Animated elements also help people navigate through long-reads, and make sense of elements like data, charts, and infographics. In “The Follower Factory,” the New York Times dives into the world of social media’s black market, starting off with a scroll-activated introductory animation before launching into an extensive examination into the digital underbelly of fake accounts as well as social identity theft and fraud.
Throughout the story, animations are applied in various ways to help readers visualize information and get a better grasp on the overall issue. Scrolling activates a double animation of image and text within two or more adjacent columns across the piece, illustrating concepts like different kinds of Twitter bots and how to spot them. And later, an even more impressive animation displays the problem in a stunning graph, detailing social following patterns that reveal unsavory audience-buying practices and serving to further breakdown and simplify the complex content at hand.
Use animation as an accent
Designed with Setka Editor
For “I’m a Celebrity Stylist,” the team decided to revive its static illustrations and give the story an interactive feel. “To do that, we divided the images into layers and animated their elements one by one,” says Averin. “In the central visual of the post, for instance, we left a static layer of the red carpet and fan silhouettes, but animated the car via a delayed scrolling trigger.” Designers can create effects that range in complexity by adding further layers, static or animated.
Tip: In the Setka Editor Animation Panel, it’s possible to define and alter an array of element transformations, like size or transparency, or movement like a shift or turn, for instance. This gives welcome variation to accent usage and enhances the overall narrative of the content at hand.
Designed with Setka Editor
“You can also enhance the effects themselves,” he continues. “We animated several smaller elements, like images of a scarf and a tube of lipstick, which move relatively slowly, almost floating in the right column.” This creates a special effect: the transformation takes place while the user reads the text in the main column. And if they scroll quickly and happen to miss that animation – that’s okay, too.
An element that appears closer to the middle of the screen is more likely to get noticed. And bringing headlines, subheads, pull quotes, sidebars, various data, and even body paragraphs into view with a slight animation – though never all at the same time! – is another great trick to direct the eye and reader’s attention.
Experiment with rotations
Designed with Setka Editor
“When working on ‘Into the Future’ with the band YACHT’s Claire Evans and Jona Bechtolt, we set out to configure the rotations of the backgrounds, photos and videos,” Averin says of this example. “Here, all the details work together due to a complex use of angles. The displayed photos feature a tilted mirror and diagonal background fills, which inspired us to base the animations on those shapes with the use of rotations.
“When adjusting rotations, set the desired angle of inclination that will be used as the element’s initial position. Use this technique carefully, and only if there’s a bigger, more meaningful design vision in mind.”
Use this technique with a big-picture design plan in mind.
Remember that timing is everything
Designed with Setka Editor
“A good rule of thumb: the smaller the element, the less time it should take to transform it,” Averin says. In the example above, “the data in the right column appears within 0.5 seconds. If you make the duration of the movement too long, the animation is more likely to annoy rather than engage a reader.”
The main thing to keep in mind when working with animated elements is to always set them up with a slight delay, instead of immediately upon loading.
“Slight animations, like fade-ins and fade-outs, work great for photo stories and illustrations,” says Rodionov. “They’re among the most popular motion effects, and can be applied to anything from text to images, tables, dividers, logos, and more.”
For articles like “I’m a Celebrity Stylist,” which include lots of factoids, numbers and potential accent copy – you can choose to have any or all appear on the screen upon scroll. In this case, the goal of the animation is to draw attention to the figure or fact that’s key to understanding the overall story.
Take note: Sometimes special effects distract from rather than enhance a reading experience. “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. “As with all kinds of design, you need reasonable proportions and meaningful application.”
“Keep animations short and purposeful,” Jordan advises. “The last thing someone wants is to have to wait for your fancy button to animate before they can click on it.”
