Adding Super Cool Animations to Your WordPress Site
The best part about animation? You don’t see them all too often in web design, which is sure to give your WordPress site an edge over the competition.
There are a number of high-quality WordPress plugins just waiting to help you add a touch of animated fun to your website.
Free WordPress Plugins for Adding Animation Effects
While animation existed before the advent of film and digital technology (think of old school animations like flip books), the Humorous Phases of Funny Faces takes top honors for being the first animated film:
Like I said before: animation is cool. Even from way back in 1906, an animated chalkboard drawing still finds a way to captivate us as an audience.
That being said, we’ve come a long way since the early days of animation. And with WordPress making the process of building websites faster and easier, we now have more time to dedicate to being more creative with story execution and fine-tuning the user experience.
The following 13 free WordPress plugins cover a wide range of animation effects. If you’re looking for something to jazz up your typography, put a spin on your navigation, or create movement in other unexpected areas of your site, you should check these out.
For websites that contain images, icons, and blocks of text, the Amazing Hover Effects plugin offers a bunch of animation options for these design elements. Included in this plugin are over 75 animation types that are triggered whenever someone hovers over the animated item. In addition, you can customize pretty much everything else within the animated item, including font, colors, links, and more.
The developer of Animate It! took the styles from Animate.css and converted them into this easy-to-use plugin. Unlike a lot of the other free animation plugins you’ll find on this list, Animate It! offers a more versatile approach to animation. This means you won’t have to cherry-pick which plugin you want to use to animate a slider or typography or a page transition. This one covers a pretty solid mix.
Looking to give headlines on your website a little more pop? The Animated Headline plugin includes ten different animation effects that allow you to do things like rotate, type out, scale, and slide in your headline text. All it requires is that you know how to apply a simple shortcode.
Floating social media icons are great because 1) they add just the slightest touch of movement to your site, and 2) they keep your social media icons right in front of your visitors (without being obnoxious) at all times. With this plugin, you don’t have to worry about creating any complicated animations. It already comes built-in with a smooth floating action.
If you’re a fan of the hover-triggered animation from #1 above, I’d suggest you take a look at this one too before making up your mind. The Image Hover Effects plugin includes over 40 different animation effects and comes with two different styles (circle or square). While similar in terms of the target elements for animation, this one’s styling is a little more buttoned-up which may better suit your site’s style. I’d suggest you check out the demo for both before downloading.
For those of you who agree that sliders don’t suck and would like to take your appreciation for them one step further, give the Meta Slider plugin a whirl. This plugin not only has four different slider widgets, but each comes with their own set of transition effects so there are plenty of options here for animating your image or content slide decks.
If you’re looking for a more overt animation for your website, you might want to consider applying an animation effect to your page transitions. With the Page Animations and Transitions plugin you can choose from nine different movement effects and also customize the animation duration.
Although this is a bit of stretch when it comes to an animation effect, it’s nonetheless still a sort of animation you can use on your website. If you’re not trying to do anything too flashy and find that other animation types don’t work for the style of your brand or site, maybe something as simple as a page scroll animation is what you need.
While you could go the route of using your WordPress theme to create a parallax effect on your site (like Upfront), a plugin might give you a few more options to play around with. This one, in particular, enables you to create individual elements—not just page headers or image banners—that you can then apply a parallax animation to.
Who’s to say that the static design elements on your WordPress site are the only ones that get to have any fun? If you’re planning to use popups or slide-ins to deliver special messaging and exit-intent intervention to your visitors, be sure to check out Hustle (which is now free in the WordPress directory). This plugin’ll give your pop-over messaging the extra movement it needs to get noticed.
Having a responsive menu is important for every website. You never know which device your visitors will find your site from. Having one that’s responsive and comes with smooth moves is even better. This Responsive Menu Plugin not only allows you to choose how you want your menu to slide or push aside, but you can choose from a number of other animation effects like spinning buttons, hover-triggered color changes, and fading.
One of my favorite tools to use when trying to keep visitors engaged after reading a blog post is a related posts plugin. If you were able to hook them with the original post, chances are good you can catch their attention by giving them a relevant post they don’t have to dig around for. The upPrev plugin takes the related post (or just a sequence of posts or pages) concept and adds an animation effect to it.
As you can see, animation for WordPress doesn’t always have to result in a fully animated experience. Sometimes adding a little movement to the smaller pieces of your website is all your visitors really need to keep them engaged in your content.
WIN a Share of $5K
Subscribe to our blog this #hostingmonth for a chance to win one of 5 prizes of $1,000 WPMU Dev credit! Learn More.