Animations in web design can greatly enhance your user’s experience. Website animations today aren’t anything like the headache-inducing, bright jagged animations that they were in the early days of the internet. Well designed and placed animations can provide subtle but clear visual clues. They can break up the monotony or help to smoothly transition users from one section of your site to the next.
But it takes time and talent to create effective animations that will help, and not hinder your site’s overall design and usability. Well, usually. You may not be able to put together an entire design all on your own (unless you’re a designer or coder of some sort of course), but you can still add some nice, animated effects pretty easily.
If your site runs on WordPress, here are some handy little plugins we’ve gathered up to help you do just that.
When you’re done checking these out, you might also be interested in these other WordPress posts:
This plugin is probably the most popular, as it currently has over 300,000 active installs. Because it’s so robust, yet easy to use, it gets to sit pretty here at the top of this list. You can choose from over 50 different entry/exit/attention seeking animation styles, which use both Animate.js and Animo.css libraries.
It adds a new icon to your WYSIWYG editor that lets you quickly insert and customize the animations.
WP Animated Page Transitions
There are lots of plugins out there and many different effects you can add to your site. To cover them all would be to write a book. So we’ll look at a few of them in several different categories. The first plugins we’ll look at let you add transitions to your pages when visitors land on or leave a page.
Page Animations and Transitions It lets you do just what the name suggests. You can add animations and transitions to your site that happen when a page is loaded or when leaving a page. While most of the reviews are positive, there is one recent review that claims this plugin doesn’t work too well in an iOs mobile environment.
I briefly tested it out on a personal site using a Samsung Galaxy and was able to see what they mean. The transition is nice and works well. But it seems if your finger hovers on a link just a tad bit too long while trying to scroll, it’ll whisk you off to that link. The first time it happened, I seen what they meant. But when I tried to do it again, I had to more purposefully pause with my finger on the link.
So if you have lots of links or links close together, you’ll probably want to test it out before making it live on your site. If you do decide to try it, please leave a comment letting everyone know how it works out!
This simple plugin adds a light, elegant effect to your pages that users see until the page fully loads. The author says it’s coded to spec with the WP Docs so it should play nicely with just about any theme or plugin (there are always exceptions!).
Interesting fact… The developer specifically thanks Tobias Ahlin, the lead experience designer at Mojang (Minecraft anyone?). But he doesn’t say exactly what, if any role, Ahlin specifically played in the creation of the plugin. The demo below is hosted on his site.
You get 4 pre-coded animations for the preloading effect, but there’s a section to add your own customizations if you’re up for it.
Check out the demo here.
Image Effects and Animations
If you want to add interesting, attention-grabbing effects to image captions then Ultimat Hover Effects might be worth looking into. There appears to be only one style seven different effects currently available for the free version. If you want to pony up for the premium version ($11), you can get a lot more styles with different effects for each one. It also lets you use custom font colors/sizes and css styles, comes with 600+ Google Fonts and you can add external links to your captions.
You can see a demo of all the different effects here.
This one is brought to you by the same people as Ultimate Hover Effects – ThemeBon. However, it has its differences. This plugin has more animations, including effects around the border of the image and different shaped styles. The circle shape is the shape you get in the free version, though. And again, it’s $11 for the pro version.
The other features that are limited to the version are:
- Background color
- Image size
- Remove border
- Remover heading underline
- Opening links in a new tab
- Custom fonts
- Custom colors and fonts for headlines/descriptions
You can check out the live demo for this one here.
Yes, another image hover effects plugin. And yes, it offers some different looks and styles than the previous two. However, it has some oddly similar features and look and feel to the admin panel even though it’s not the same developer. It also has a lot of the same features locked behind a pro version, but there are quite a few animated effects that are offered for free.
You can see the demo for this one here.
Text and Headline Animations
This plugin gives some interesting, beautiful animation to the text you assign it to. It has a wide variety of options for both text entering and exiting. Bouncing, rubber banding, rolling, hinging, slide in, fade and more.
The only thing I didn’t like when testing this one out is there’s no way to just use the entrance effect and then leave the text there. It has to have an exit effect, too. Sure, you have the option to loop the entrance and exit, but I’d prefer to have the option of just leaving the text there once it’s in place.
And sure, you could probably tweak the code yourself, but if you wanted to mess with code then you probably wouldn’t be looking at these plugins. Right?
Add some pizazz to your headlines without overdoing it. CSS3 Rotating Words lets your text automatically rotate through a given set of words with, obviously, CSS3. It’s AJAX based so it’s simple and fast. Pick out a few descriptive adjectives, choose your style options and how fast they should rotate. Save settings, grab shortcode, put it in your post and let it whirl through them in your sentence.
If you’re interested in seeing what it looks like in action, go here.
Tip: When you add your rotating words separated by a comma into the box, include a space after each word (before the comma). Otherwise, there won’t be a space between the rotating word and rest of the sentence that follows.
This plugin will help you do almost the same thing as CSS3 Rotating Words, but it’s much more bare boned. Once you install the plugin, you put the following shortcode into your post:
[animated-headline title=”I want to animate” animated_text=”this,this text,here” animation=”clip”]
In this example:
- I want to animate is the text before the animated/rotating words
- This, this text, here are the words you want rotated in and out
- Clip is the type of animation that you want
There are ten types of animations possible and you can find the names of them in your admin dashboard for the plugin. It’s plain and simple, but it seems the animated/rotating words can only be used at the end of the headline.
The following plugin didn’t really fit into the other sections, so we’ll just add it here.
This plugin basically makes hovering links in a menu smoother. When links have a background hover effect, it can appear jittery as they suddenly appear and disappear as you move your mouse across it. With Page Scroll ID, the effect you get when moving from one menu item to another is a smooth transition. You can see it in action here.
We only covered a small portion of the many plugins out there that can help you add animation effects to WordPress. And all the ones here are free, too. While you don’t want to go animation-crazy on your site, doing it right can make your site easier to use and beautiful. For more insight, tips, ideas and inspiration, check out Nick Babich’s article about animation in modern web design.
What do you think about today’s subtle animations? Do you have any awesome examples of this being put into practice? If you’ve found this post helpful, please don’t forget to share.