Want to add animation to WordPress?
There are a few great reasons to do so – animation helps you create an engaging brand story, stick out among competitors and lower bounce rates. And the best part? You don’t need to know how to code or design. WordPress has tons of plugins you can use to easily add motion to your sites.
Here are the ten best animation plugins you can download right now:
1. LottieFiles – Lottie block for Gutenberg
Not to toot our own horn, but the LottieFiles for WordPress plugin is one of the easiest ways to add motion design elements to your site.
This plugin allows you to search thousands of free Lottie animations, which are super lightweight file formats. This means faster loading times for your site. Then, insert them into WordPress in just a few clicks. Easily set custom events – such as hover, click or scroll – to trigger its playback. You can even add your own CSS classes to customize the look and feel of a Lottie. To find out more, read our guide on adding and customizing Lottie animations in WordPress.
Types of animations: Thousands of free animations for any use case and industry – whether you’re looking for animated icons, illustrations, loading animations and more.
Use cases: If you need to add lightweight animations, or animations that respond to clicking, hovering or scrolling. Can also be used to add animations as a background.
Pricing: Free
2. SVG Support
SVG (Scalable Vector Graphics) animations can be tricky on WordPress, but the SVG Support plugin aims to eliminate that. It allows you to upload SVG files as images in your media library, then lets you style or animate them with CSS and JavaScript.
If you’re wondering when to use an SVG or a Lottie animation, check out our guide to these file types here.
Types of animations: Any SVG animations you’d like to upload and work with.
Use cases: If you need a simple way to embed SVG files.
Pricing: Free
3. Slider Hero
The Slider Hero plugin adds a ‘cinematic’ look to your site, offering over 80 background animation effects and audio that can add a whole new dimension to text or static pages.
Types of animations: Sliders, text carousels, video backgrounds and text animations.
Use cases: If you’d like to create animated headers for your website, or engaging banner adverts.
Pricing: Free version and three upgrades at $29, $59 and $79
4. Superfly
Superfly allows you to easily create animated navigation menus, while offering tons of different styles. Conventionally, animated menus require knowledge of CSS and JavaScript to create, so this plugin can save you a lot of time and effort.
Types of animations: Animated navigation menus in different styles – full-screen, minimalist, always-visible and more.
Use cases: If you’d like an animated menu to replace or complement your static menu.
Pricing: $29
5. Transition Slider
Got an image or video slider on your site? The Transition Slider plugin offers 47 templates with customizable transition effects for these sliders. Sliders are usually at the mercy of good images or video, but these effects can add an engaging new dimension to what you already have.
Types of animations: Effects include warping, zooming, fading, stretching, crossfading and blurring.
Use cases: If you’d like to add animated transitions to an image or video slider.
Pricing: Free version and one upgrade at $35
6. Animate It!
The Animate It! plugin allows for 50+ CSS animations to be used on your site pages, posts and widgets.
Types of animations: These are small, crisp animations that add dynamic movement to static elements.
Use cases: If you’d like to add movement to static elements, such as icons or text.
Pricing: Free
7. Image Hover Effects Ultimate
The Image Hover Effects Ultimate plugin allows you to include engaging animations when a user hovers over images on your site.
Types of animations: This includes eight hover effects, each with their own variations, that allow for boxes to flip around, spiral in and out, captions to appear and sliding image comparisons.
Use cases: This is a great plugin if you want to make images in a portfolio or gallery stand out.
Pricing: $19.99, $49.99, $199.99
8. Blocks Animation: CSS For Gutenberg Blocks
As you know, Gutenberg blocks are used to create content layouts for WordPress. The Blocks Animation plugin allows you to add CSS animations to any of those blocks on your site. But you don’t need to write any CSS from scratch, as the plugin offers a variety of options you can add in a few clicks.
Types of animations: Choose from different animation styles, such as bounce, wobble, flash, fade in and rubber band.
Use cases: If you’d like to add simple animations to any Gutenberg block.
Pricing: Free
9. Advanced Typing
The Advanced Typing plugin does one thing and does it very well – it simulates the look of someone typing out words on your site. You can even ‘humanize’ it by having the animation make mistakes or backspace, and can use whatever font you’d like, and at any size.
Use cases: The animation is very specific, but perfect for taglines in the hero section of your website.
Pricing: $12
10. WebP Converter for Media
The WebP Converter for Media plugin doesn’t actually add animation to your site. Instead, it speeds up your site by converting images into AVIF and WebP formats. These file formats are significantly lighter than standard animation formats like GIFs.
Of course, if your website uses a lot of animation, consider switching to Lottie. A Lottie animation is super lightweight, and is on average 600% smaller than a GIF!
Use cases: If your site uses JPEG, PNG and GIF, and you’d like to optimize them for fast loading speeds.
Pricing: Free version and multiple upgrades, from $5 to $1500
Add motion magic to WordPress
We hope this list has given you a few ideas on how you can animate your WordPress sites. These plugins make it that easy to add motion, even if you can’t code or design. And if you’re looking for more inspiration, here are a few impressive WordPress sites that use Lottie animations.
So what are you waiting for? Get building with WordPress!
