Animating content on your site can engage visitors, communicate meaning and context, and enhance the user experience. Using animation appropriately has many benefits, but when misused, animation can actually have harmful effects. It’s important that you consider all of these tips before adding animation to your pages.
When to Use Animation
Animation isn’t just about making things move; it should serve a purpose. Here are some scenarios where animation can be particularly effective:
- Drawing Attention to Important Elements: Gently animate a call-to-action button, a key statistic, or a new announcement to guide the user’s focus.
- Illustrating Processes or Relationships: Animate steps in a process, the flow of data, or the connection between different elements to make complex information easier to understand.
- Adding Subtle Visual Interest: Carefully placed, non-distracting animations can add a touch of personality and visual appeal to your site.
- Storytelling: Animation can be a powerful tool for visual storytelling, especially when showcasing research, projects, or narratives.
Animation should be a deliberate tool, not a decorative afterthought. If you find yourself animating more than 25% of the elements on your page, you are probably adding too much movement. This has an impact on accessibility and the reputability of your site.
Animation Examples
Good
Here’s an example of acceptable use of subtle animation to enhance the user experience by drawing attention to the stats:
Bad
The following example illustrates bad use of animation. The animations are distracting, disjointed, and confusing to visitors. Some visitors may even choose to leave the page or site entirely if they see animation used in this way.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
How to Animate Content
- Find and select the element you would like to animate
In the block editor, find the element you would like to animate. Click on it to select it. - Make sure the right sidebar is open
If it’s not, toggle it by clicking the button to the left of the publish/save button. You should see a tab that that says “Block” at the top of the sidebar. Click on it to select it. - Find the “Animation” dropdown in the panel. Click to open it.
Note: to prevent misuse, animation is limited to a select group of blocks, including paragraphs, headings, and groups. If you do not see this dropdown, this likely indicates that the block cannot be animated. - Choose an animation
You should see a select box with several animation names. Choose the one you’d like to use - Add animation delay (optional)
Keep in mind that animations will always begin once the element becomes visible in the browser window. Any delay you add will be added to this initial trigger time. - Preview your page
Preview the page as a user to make sure that the animation appears as intended. Ensure the page follows our animation guidelines.