Adding Super Cool Animations to Your WordPress Site

Adding Super Cool Animations to Your WordPress Site

Animations are cool. We’ve seen them at play in gamification, in page transitions, and also in the latest navigation design trend.

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.

I think part of the reason why this engaging design trend isn’t seen as frequently as we rightfully should is because many WordPress users are unaware of how many tools there are to aid in its execution. While you could learn how to code CSS, JavaScript, and jQuery animation effects on your own, why not get WordPress to help you out?

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.

  • Amazing Hover Effects Plugin

    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.

    Interested in Amazing Hover Effects Plugin?

  • Animate It! Plugin

    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.

    Interested in Animate It! Plugin?

  • Animated Headline Plugin

    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.

    Interested in Animated Headline Plugin?

  • Social Media Flying Icons Plugin

    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.

    Interested in Social Media Flying Icons Plugin?

  • Image Hover Effects Plugin

    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.

    Interested in Image Hover Effects Plugin?

  • Meta Slider Plugin

    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.

    Interested in Meta Slider Plugin?

  • Page Animations and Transitions Plugin

    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.

    Interested in Page Animations and Transitions Plugin?

  • Page Scroll to ID Plugin

    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.

    Interested in Page Scroll to ID Plugin?

  • Parallax Scroll Plugin

    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.

    Interested in Parallax Scroll Plugin?

  • Hustle Plugin

    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.

    Interested in Hustle Plugin?

  • Responsive Menu Plugin

    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.

    Interested in Responsive Menu Plugin?

  • Typing Effect Plugin

    Using the Typed.js script as a base, the developer of this plugin has given WordPress users who might not be comfortable using JavaScript the ability to apply a typing effect to any bit of text on their website. While you won’t want to use this plugin for full pages of content, it would be an awesome tool to use if you want to give a specific string of text some extra pop.

    Interested in Typing Effect Plugin?

  • upPrev Plugin

    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.

    Interested in upPrev Plugin?

Wrapping Up

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.

However, if you do feel like your site would benefit from a fully animated and dynamic landscape, I’d urge you to look into JavaScript libraries. Many of these offer more options, giving you more flexibility and room to play with your animation effects.

Brenda Barron
Over to you: Are there any types of animation effects you’ve been inspired by outside of websites? Were you able to implement them on your own website?