Integrating animation for the ultimate level of content engagement
Learn how to start using animations in your content to catch the reader’s eye and make them want to keep scrolling
![](\"cover-(1)-4.png\")
![](\"cover-mobile-6.png\")
![](\"kav.svg\")
There are three responses to a piece of design – Yes, ’ ‘No, ’ and ‘Wow.’ ‘Wow’ is the one to aim for.
![](\"milton-profile.png\")
Milton Glaser
Legendary American graphic designer,
illustrator
We’re all about designing an exceptional reading experience at Setka, so that your blogs, posts, and pages can communicate effectively with users, be a powerful champion of your brand, and improve business KPIs. Our framework for great content design is based on 750+ pages of research and insights from the best in the industry and features step-by-step instructions for creating well-designed written work. In this step, we dig deep into using visuals and imagery on your pages to improve engagement and drive more people to convert – with help from some industry-leading experts along the way. Check out the full framework for insights that will help make your content easier to read, more engaging, and a better representation of your brand.
![](\"ebook01.svg\")
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.”
3x
Blog posts that feature some form of animation, video or relevant clip attract 3 times as many inbound links as those without
Moz
On top of that, animation adds a touch of magic to any piece of content. Movement is sure to not only engage, but truly enchant your audience – guiding and planting their attention where you want it to go. “Elements that fade in, change color, or otherwise move are thought to delight users and to make a design ‘pop’, ” the Nielsen Norman Group (NN/g) – world leaders in research-based user experience design – confirms.
“But animation is more than just an afterthought of smile-inducing touches, ” says Will Fanguy, Content Strategist at InVision. “Good functional animation makes a user interface considerably more appealing and usable” with a clear, logical purpose that helps reduce your readers’ cognitive load, direct their focus, and establish spatial relationships within your content – while even working to build brand identity.
Animations add life to your designs, providing context and giving warmth to the way your users interact with your interfaces.
— InVision
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.
![](\"ebook02.svg\")
The basics of animations in content
There are so many ways publishers can start incorporating more animation into their content, from massive animated blocks to tiny moving elements. If you’re not sure where to get started, here are some common (and powerful) animation opportunities.
Animated Article Covers
![](\"browser.png\")
Source: Hope & Fears
An attractive, animated cover image glues the eye to the page, establishing an immediate connection with the viewer while motivating readers to keep scrolling in hopes of discovering more engaging material. Researchers D. Lagun and M. Lalmas at the ACM International Conference on Web Search and Data Mining shared that users tend to stay almost twice as long on the first screen when the article starts with an image, compared to articles without an image on top – and in a world where a large header image has become the norm, animations can help you stand out from the pack even more.
But you don’t always have to pull out all the stops above the fold. Instead, do what makes sense for each piece of content. If there’s an opportunity to show off a bit without distracting or confusing your readers, go for it. Otherwise, a more subtle approach – like a header that animates onto the screen or a small pulsating arrow encouraging readers to scroll down – might be more appropriate.
On-scroll animations
Source: Norm
DESIGN IDEA
Use scroll-activated animation for secondary, supporting content rather than for the main bodies of text. When applied in this way, people are not forced to wait for every area of text to ‘finish loading’ so they can continue reading, yet the overall visual-aesthetic benefits are maintained. — NN/g
At least part of the goal of any imagery in your content is to keep users engaged and scrolling down the page. One approach is to visually reward them with animated elements as they move. As Editor-in-Chief of UX Planet Nick Babich explains in Smashing Magazine, “Considering that users’ attention span on the web is about 8 seconds, a delightful scrolling experience will certainly prolong user interest.”
On-scroll animations can show up in a variety of ways, from illustrations that move across the page to background color or photo changes to text that fades into view.
TOOLBOX
Setka lets you choose when every animation on your page starts – as the element appears on the screen, when scrolling, on mouse over, or on click – making it easy to add scroll-activated animations to your page.
Animations for explanation
Source: New York Times
Some of the most successful animated elements aren’t there for mere decoration – they actually help readers learn and understand the material. Studies have shown that our brains process images 60,000 times faster than text, and that we remember 55% more of information when it has a relevant image paired with it. There’s a reason why animated explainer videos have become so popular in recent years!
You can use animated elements to your advantage to explain concepts without having to produce full videos. A destination-focused piece, for instance, may feature an animated map that changes as a reader scrolls throughout the story, highlighting certain routes or cities to add meaning and depth. Data points may be animated to make complex numbers easier to understand using visual aides. Animated elements can also help people navigate through long-reads, illustrating important points to help them shine amongst all the text.
Animation can go even further to convey emotional concepts that are harder to communicate with words. As the Animation Handbook from design better by Invision explains, “Animation can stand on its own to help convey hard emotions and concepts where words falter. Headspace leverages animation to bypass stigmas and stereotypes when explaining concepts like meditation and managing anxiety. Animation is just relatable enough – but not too real – that it makes a perfect bridge to unfamiliar concepts.”
Accent animation
Source: Miro
Not all animation has to be dramatic or serve a big role in explaining your content. Especially if you’re just getting started with animations, small accent movements can be an easy way to add visual interest as users move down the page. Even animation pros can employ this strategy to add small moments of delight or subtle design choices for drawing attention.
Animation can be applied to paragraphs, drop caps, singular words or lines of copy to make sure a reader doesn’t miss important content. 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. Numbers can count up to the final data point. Image galleries can auto-animate to prevent the user from having to click through, or can layer over one another as readers scroll to add some depth. Get creative with small ways to add a little movement to your page and you might be surprised by the engagement affects you see.
TOOLBOX
Animations can be easily applied to nearly every element on your page – photos, illustrations, icons, simple dividers, headers, text blocks, and so much – with just a few clicks in Setka.
![](\"ebook03.svg\")
Common animated movement styles
Now that we’ve talked about where to add some animated moments throughout your content, you might be wondering exactly what motion you should be using.
Walt Disney’s 12 principles of animation are commonly referenced as the basis of good motion work, and while they’re definitely good to familiarize yourself with, they’re more useful for animating characters and worlds in movies than animating elements on a digital screen. For that, we turn to Issara Willenskomer, UI educator and owner of UX in Motion, and his 12 principles of UX in motion.
Although slightly more targeted at designing motion in apps or websites, these principles provide powerful inspiration for editorial designers looking for ways to integrate movement into their layouts.
As you work on designing your posts, think creatively about how different pieces might move around the page or interact with these principles in mind. For instance, you might play with:
- EASING AN ELEMENT from off screen to on screen
- HAVING MULTIPLE IMAGES MASK over each other than than having a standard image gallery
- HAVING A SECTION OF YOUR PIECE ZOOM to a larger size as the user scrolls down
- USING OVERLAY TO REVEAL A SECRET IMAGE or content section
- COUNTING UP TO A FINAL DATA POINT using value change
![](\"screen-recording-2020-04-05-at-03.34-pm-1.gif\")
Setka’s special animation effects
On top of these, there are so many great movement styles specifically beneficial to content design. Setka has integrated the best Animate.css animations for editorial-specific efforts into its editor. This enables editors and designers to easily apply 25+ complex animations right within the editor interface, resulting in wonderfully rich effects that perfectly support content efforts.
Users can easily apply fade, slide, flip, and zoom – choosing the direction the object moves – as well as a range of special effects like jack-in-the-box, roll in, bounce, pulse, rubberband, shake, swing, tada, wobble, jello, and heartbeat.
![](\"ebook04.svg\")
Best practices for outstanding use of animation
4.1. Create natural-feeling movement
DESIGN IDEA
Remember that animations don’t just have to move up and down, but can move left to right (like an animated car driving across the screen) or in all directions to create movement that feels akin to real life.
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.
4.2. Pay careful attention to timing
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.
TOOLBOX
All of Setka’s animations have preset styling that’s optimized for user experience, but you can also manually tweak nearly every element of your animation – including speed and timing – to perfect it for your design vision.
Want to keep these tips on hand?
4.3. Don’t get in the way of usability
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.
4.4. Don’t go overboard
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.”
4.5. Keep it on-brand
![](\"content-expirience-using-visuals-imagery-to-improve-content-engagement-1.png\")
Learn more about using custom imagery to differentiate your company in our eBook: Using visuals and imagery to improve content engagement.
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.”
4.6. Make sure everything works on mobile
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.
TOOLBOX
Setka makes it easy for you to determine which of your desktop animations you want to show up on mobile. In the animations menu, simply toggle on or off the “show animations on mobile” option. Turn them all off, keep them all on, or keep some for visual interest without overwhelming people. Play around and peek at your mobile preview to see what works.
![](\"ebook05.svg\")
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.”
DESIGN IDEA:
As a fun and engaging additional design touch, visitors are able to control the accent color seen throughout the site by hovering the top-right corner of their Viacom.com window. Empower readers and viewers with options to choose from and a sense that you can about their personal preferences and overall content experience.
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.
![](\"ebook06.svg\")
Key Takeaways
Use animation to guide your audience
Animation is most powerful in content design when it’s guiding your audience, either helping draw them down the page, drawing their attention to an especially important bit of information, or visually explaining a complex topic. When integrating animations into your strategy, start with this goal in mind.
Keep your animations intentional
You don’t want animations to make your content harder to read or distract the user from the most important information, so don’t just throw them around willy-nilly because you think it looks good. A few well-thought-out animated elements will be more powerful than a lot of random ones.
Have a little fun with it!
All that said, the other value of animations is to add a little surprise and delight for your readers, so let yourself have a little fun when integrating this into your designs. If you have an animation idea that makes you smile, it probably will make your readers smile, too, so it’s probably worth integrating.
![](\"ebook07.svg\")
Next steps
Ready to take your layout to the next level? Use our checklist below to evaluate how you’re doing in terms of designing for optimal comprehension, and identify areas for improvement – or let us do the work for you!
Reach out for a FREE 3-Step Content Makeover that includes a content design review, scorecard of your content and action steps for optimizing every part of your content – to more deeply engage your readers (and get better ROI).
Get a FREE 3-Step Content MakeoverImagery Scoring Checklist
PAGE HAS A VISUAL ELEMENT (photo, illustration, visualized data, or other image) every 75-100 words
PAGE HAS A RELEVANT AND VISUALLY ENGAGING COVER IMAGE
CONTENT AND IMAGES ARE LAID OUT ACROSS A CONSISTENT AND VISUALLY-INTERESTING GRID
EMBEDS ARE USED WHERE APPROPRIATE TO IMPROVE USER EXPERIENCE
TABLES ARE CREATED DIRECTLY WITHIN THE GRID, NOT BY INSERTING A PREMADE STATIC IMAGE
DATA VISUALIZATIONS AND DATA HIGHLIGHTS ARE THROUGHOUT THE PIECE WHERE APPROPRIATE
PULL QUOTES APPEAR THROUGHOUT THE PIECE
BULLETED LISTS ARE USED AS NEEDED
IMMERSIVE, FULL-WIDTH IMAGES ARE USED WHEN APPROPRIATE
ALL VISUAL ELEMENTS DISPLAY WELL ON MOBILE
About Setka
Setka is a no-code design tool that makes it easy for anyone to build engaging, interactive and fast-loading content that converts and delivers results. Thousands of brands, publishers and media players from around the world have worked with Setka to enrich their reader’s experience and improve the ROI of their content. It’s also been recognized as one of 14 global WordPress VIP Technology Partners, by delivering innovative management and editing tools that easily integrate into any CMS.
Who is Setka?
Setka is part of the world’s most trusted content authoring and designing toolbox. All our Tiny tools solve big content problems – many of them are trusted and embedded in applications you use every day, from LinkedIn to Visa – and our TinyMCE authoring tool is downloaded one million times a month.
We’ve helped SaaS companies, large enterprises and content creation publishers build and scale their own business, as well as their users. Right now, there’s tens of thousands of market-leading applications powered by Tiny, globally.