Search results for:
Animations in web design can significantly enhance your user's experience. Today's website animations aren't anything like the headache-inducing, bright jagged animations 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 transition users from one section of your site to the next smoothly.
But it takes time and talent to create compelling 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 plan all independently (unless you're a designer or coder of some course). However, you can still add some nice animated effects with relative ease.
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.
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 excellent 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 saw what they meant. But when I wanted to do it again, I had to pause more purposefully 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 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 precisely what, if any role, Ahlin specifically played in creating the plugin. The demo below is hosted on his site.
You get four pre-coded animations for the preloading effect, but there's also a section to add your customizations if you're up for it.
Check out the demo here.
Suppose you want to add interesting, attention-grabbing effects to image captions. In that case, Ultimat Hover Effects might be worth looking into. There appears to be only one style with seven different effects currently available for the free version. If you want to pay for the premium version ($11), you can get many 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:
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.
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:
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 makes hovering links in a menu smoother. When links have a background hover effect, they 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 excellent examples of this being put into practice? If you've found this post helpful, please don't forget to share.
Written by Hostwinds Team / May 5, 2017
Need help? Chat now!