{"id":163901,"date":"2017-04-12T13:00:36","date_gmt":"2017-04-12T13:00:36","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=163901"},"modified":"2022-03-03T22:45:09","modified_gmt":"2022-03-03T22:45:09","slug":"free-animation-plugins","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/free-animation-plugins\/","title":{"rendered":"Adding Super Cool Animations to Your WordPress Site"},"content":{"rendered":"

Animations are cool. We\u2019ve seen them at play in gamification<\/a>, in page transitions<\/a>, and also in the latest navigation design trend<\/a>.<\/p>\n

The best part about animation? You don\u2019t see them all too often in web design, which is sure to give your WordPress site an edge over the competition.<\/p>\n

I think part of the reason why this engaging design trend isn\u2019t 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?<\/p>\n

There are a number of high-quality WordPress plugins just waiting to help you add a touch of animated fun to your website.<\/p>\n

Free WordPress Plugins for Adding Animation Effects<\/h2>\n

While animation<\/a>\u00a0existed before the advent of film and digital technology (think of old school animations like flip books), the Humorous Phases of Funny Faces<\/em> takes top honors for being the first animated film:<\/p>\n

7M5So1WFNzo<\/span><\/span><\/p>\n

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.<\/p>\n

That being said, we\u2019ve 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.<\/p>\n

The free WordPress plugins below cover a wide range of animation effects. If you\u2019re 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.<\/p>\n

    \n
  1. Hustle<\/a><\/li>\n
  2. Meta Slider<\/a><\/li>\n
  3. Image Hover Effects<\/a><\/li>\n
  4. Amazing Hover Effects<\/a><\/li>\n
  5. Animate It!<\/a><\/li>\n
  6. Animated Headline<\/a><\/li>\n
  7. Page Animations and Transitions<\/a><\/li>\n
  8. Page Scroll to ID<\/a><\/li>\n
  9. Parallax Scroll<\/a><\/li>\n
  10. Responsive Menu<\/a><\/li>\n
  11. Typing Effect<\/a><\/li>\n
  12. upPrev<\/a><\/li>\n<\/ol>\n

    1. Hustle<\/h3>\n
    \"Hustle\"
    Hustle<\/figcaption><\/figure>\n

    Who\u2019s to say that the static design elements on your WordPress site are the only ones that get to have any fun? If you\u2019re 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).<\/p>\n

    This plugin\u2019ll give your pop-over messaging the extra movement it needs to get noticed.<\/p>\n

    More info: Hustle<\/a><\/p>\n

    \n

    2. Meta Slider<\/h3>\n
    \"Meta
    Meta Slider<\/figcaption><\/figure>\n

    For those of you who agree that\u00a0sliders don\u2019t suck<\/a>\u00a0and would like to take your appreciation for them one step further, give the Meta Slider plugin a whirl.<\/p>\n

    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.<\/p>\n

    More info: Meta Slider Plugin<\/a><\/p>\n

    \n

    3. Image Hover Effects<\/h3>\n
    \"Image
    Image Hover Effects<\/figcaption><\/figure>\n

    If you\u2019re a fan of the hover-triggered animation, I\u2019d 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).<\/p>\n

    While similar in terms of the target elements for animation, this one\u2019s styling is a little more buttoned-up which may better suit your site\u2019s style. I\u2019d suggest you check out the demo for both before downloading.<\/p>\n

    More info: Image Hover Effects<\/a><\/p>\n

    \n

    4. Amazing Hover Effects<\/h3>\n
    \"Amazing
    Amazing Hover Effects<\/figcaption><\/figure>\n

    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.<\/p>\n

    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.<\/p>\n

    More info: Amazing Hover Effects<\/a><\/p>\n

    \n

    5. Animate It!<\/h3>\n
    \"Animate
    Animate It!<\/figcaption><\/figure>\n

    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\u2019ll find on this list, Animate It! offers a more versatile approach to animation.<\/p>\n

    This means you won\u2019t 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.<\/p>\n

    Note: WordPress.org warns this plugin is outdated but it worked fine when we last tested it (March 2022).<\/em><\/p>\n

    More info: Animate It!<\/a><\/p>\n

    \n

    6. Animated Headline<\/h3>\n
    \"Animated
    Animated Headline<\/figcaption><\/figure>\n

    Looking to give headlines on your website a little more pop? The Animated Headline plugin includes ten different animation effects that allow\u00a0you to do things like rotate, type out, scale, and slide in your headline text.<\/p>\n

    All it requires is that you know how to apply a simple shortcode.<\/p>\n

    Note: WordPress.org warns this plugin is outdated but it worked fine when we last tested it (March 2022).<\/em><\/p>\n

    More info: Animated Headline<\/a><\/p>\n

    \n

    7. Page Animations and Transitions<\/h3>\n
    \"Page
    Page Animations and Transitions<\/figcaption><\/figure>\n

    If you\u2019re looking for a more overt animation for your website, you might want to consider applying an animation effect to your page transitions.<\/p>\n

    With the Page Animations and Transitions plugin you can choose from nine different movement effects and also customize the animation duration.<\/p>\n

    More info: Page Animations and Transitions<\/a><\/p>\n

    \n

    8. Page Scroll to ID<\/h3>\n
    \"Page
    Page Scroll to ID<\/figcaption><\/figure>\n

    Although this is a bit of stretch when it comes to an animation effect, it\u2019s nonetheless still a sort of animation you can use on your website.<\/p>\n

    If you\u2019re not trying to do anything too flashy and find that other animation types don\u2019t work for the style of your brand or site, maybe something as simple as a page scroll animation is what you need.<\/p>\n

    More info: Page Scroll to ID<\/a><\/p>\n

    \n

    9. Parallax Scroll<\/h3>\n
    \"Parallax
    Parallax Scroll<\/figcaption><\/figure>\n

    While you could go the route of using your WordPress theme to create a parallax effect on your site, a plugin might give you a few more options to play around with.<\/p>\n

    This one, in particular, enables you to create individual elements\u2014not just page headers or image banners\u2014that you can then apply a parallax animation to.<\/p>\n

    Note: WordPress.org warns this plugin is outdated but it worked fine when we last tested it (March 2022).<\/em><\/p>\n

    More info: Parallax Scroll<\/a><\/p>\n

    \n

    10. Responsive Menu<\/h3>\n
    \"Responsive
    Responsive Menu<\/figcaption><\/figure>\n

    Having a responsive menu is important for every website. You never know which device your visitors will find your site from. Having one that\u2019s responsive and comes with smooth moves is even better.<\/p>\n

    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.<\/p>\n

    More info: Responsive Menu<\/a><\/p>\n

    \n

    11. Typing Effect<\/h3>\n
    \"Typing
    Typing Effect<\/figcaption><\/figure>\n

    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.<\/p>\n

    While you won\u2019t 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.<\/p>\n

    More info: Typing Effect<\/a><\/p>\n

    \n

    12. upPrev<\/h3>\n
    \"upPrev\"
    upPrev<\/figcaption><\/figure>\n

    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\u2019t have to dig around for.<\/p>\n

    The upPrev plugin takes the related post (or just a sequence of posts or pages) concept and adds an animation effect to it.<\/p>\n

    More info: upPrev<\/a><\/p>\n

    \n

    Wrapping Up<\/h2>\n

    As you can see, animation for WordPress doesn\u2019t 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.<\/p>\n

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

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    Animations are cool. We\u2019ve seen them at play in gamification, in page transitions, and also in the latest navigation design trend. The best part about animation? You don\u2019t 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 […]<\/p>\n","protected":false},"author":344989,"featured_media":164049,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[10151,9976],"tutorials_categories":[],"class_list":["post-163901","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-animations","tag-plugins-3"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344989"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=163901"}],"version-history":[{"count":12,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163901\/revisions"}],"predecessor-version":[{"id":206670,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163901\/revisions\/206670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/164049"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=163901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=163901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=163901"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=163901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}