Animations editorial guidelines

Crystal Lambert

Feb. 23, 2022

Animations bring life and motion to your Web Story pages. You can animate individual elements and entire pages to create an immersive experience. However, use them wisely and sparingly. Animations can become obnoxious or distracting when overused.

Bring life and motion

Do
The motion in this example helps support the main idea and adds a dynamic element to the page.
Do not
This static page is functional, but it may be missing an opportunity to be more engaging to readers.
Do
Do not

Timing is everything

Pages should enter their completed state quickly - an animation should not stop a user from tapping to the next page - but not too fast! It’s important to deliver the right combination of style and duration. For example, simple animations should take less than 500 milliseconds, but panning on a background image should last longer.

Consider getting creative with motion. Animate multiple objects into a sequence, rather than having them move together in a single effect. Elements can have different effects and durations that work towards a cohesive animation.

Do
This Ken Burns effect on the background image is subtle and makes the experience more immersive. It creates a right balance with the text overlay toge
Do not
Here, the Ken Burns effect is too fast. The motion is distracting and makes it hard to focus on the headline.
Do
Animating these objects separately makes this visual more interesting and enjoyable. It also helps each item stand out more distinctly.
Do not
Adding rapid motion to one big block like this doesn’t add to understanding, and it can be distracting.

Vibe and style

Pair your animation style with your story’s aesthetic. Use the available Web Story animation library to help you find a style and intensity that works for you without distracting from content.

Do
Sliding the title up and fading in the subtitle guides the reader to follow the content of the page in the right order
Do not
This rotation animation doesn’t add value to the story. Instead, it creates visual noise and may be distracting to readers.
Do
Do not

Was this guide useful? Thanks!

Continue learning

Video and images editorial guidelines Modern Storytelling with Web Stories

Embeds, links and interactive content editorial guidelines Modern Storytelling with Web Stories