Adding even a touch of animation to your homepage or post is a sure way to grab attention and spike traffic- often by very significant amounts. And with so many effects available, there’s a wide range of easy options for applying animation.
From buttons that change color, to hover effects, animated gifs and parallax scrolls, website animation is a huge design trend, responsible for pushing tons of additional traffic for a wide range of sites. With only 5 seconds to make an impression, having a page that’s dynamically optimized with animation can increase your traffic by leaps and bounds.
We all know it’s easy to add Twitter feeds, and 3rd party animated feeds on a home page, but how about displaying animation that is proprietary to your brand, and instills engagement with your audience on a continuous loop?
By doing this you’re adding valuable content, and a spark of fun that even a little movement provides.
And now days, there are lots of easy ways to apply animation.
No longer is this the domain of the experts, animation and the myriad of ways it can be applied is as easy as adjusting a plugin.
I’ve compiled 12 easy ways to add animation to a post or page, using these popular WordPress plugins:
They’re the ideal tools for delivering effects such as hovering, bouncing, pulsing or animations that take effect as the user scrolls down the page. And with WordPress, there are lots more options available without having to learn CSS.
Starting with the simplest:
1. Hover effects
Hover effects is an animation that happens when the mouse hovers over an element on the screen.
Here are 3 popular WordPress plugins for Hover effects:
A. Ultimate Hover Effects
Ultimate hover effects is simple modern, yet stylish hover effects for image captions.
You can easily add eye catching hover effects with CSS3 transitions using an image & embed them in separate page post.
B. Amazing Hover Effects
Especially for pages with images, icons and block or text, this plugin has an more impressive collection of animation options, powered by CSS3 and iHover, with no dependencies. The collection includes over 75 animation effects, all triggered when a mouse hovers over it.
You can customize font, colors, and more, within the animated item.
It also has a shortcode generator which make it easy to employ.
C. Image Hover Effects Plugin
This is one of the most popular hoover effect plugins for WordPress, with over 70 effects that can be applied to images. Effects such as sliding in, wiping, flip up, rotating, descriptions on separate cells, can be applied to both square and round images. It has drag and drop compatibility, custom font sizing for both headings and descriptions, external links for each hoover, and a Pro version with popups and play videos.There are also options that can be customized by admin, These effects use pure CSS3 and render effects very swiftly.
2. Image Slide shows
Image Slide shows can add loads of visual impact.
Consider installing a carousel of looping images, like this one used by
See her beautiful example:
Or, you can use the most popular WordPress slider plugin out there, MetaSlider.
Metaslider creates slideshows quickly and easily by selecting images form your Media Library and then, you can drag and drop them into place.
There are four different slider widgets to choose from, and each has its own set of transition effects for animating your image or content.
Shortcode is provided, or template included so you can easily embed it in your page.
3. Animated gifs.
Who doesn’t love a good animated gif?
GIF animations are relatively easy to create and upload. Start with an idea that matches your website’s personality.
Here’s a popular WordPress plugin for adding GIFS:
Giphypress is a plugin that allows you to search the Giphy data base from your wordpress admin area without leaving your site.
With the Giphypress plugin you can add an animated gif to a blog post in WordPress either from your own creative files, or from outside sources such as Giphy.
There is a trick to keeping the gif’s animation in tact. In WordPress, select “full size” under the Attachment Display Settings in the right hand section when uploading to the media library. Then you can insert into post and continue.
Otherwise, WordPress will save only the first frame of the gif, leaving it static, because the default wordpress images sizes of thumbnail, medium and large. This is where the “full size” selection bypasses that default.
Learn more about Giphy and the Giphypress plugin here:
Or, make your own gif in photoshop!
Using the built in animation tools, customized animated gifs are easy and fun to make. Simple animations include anything from a bit of color, changing text, dancing cats, or even flying pigs, which can be installed as a widget in your page sidebar. Create your animation in photoshop, or an image editing software of your choice, save in the GIF file format and upload using the image uploader.
4. Hyena – GIF Animation Controls for WordPress
It you’re into animated gifs, you might just love Hyena. Hyena is a lightweight, unobtrusive and responsive animated GIF plugin for WordPress. Hyena allows you to customize your animated gifs with a powerful set of animation controls, seamless tiles and built in media player skins, unique playback events, and many settings for configuring gif playbacks.
Hyena delivers better performance, faster load times, easier styling and more sophisticated event interaction – without the restrictions of an HTML5 video player.
Though not free, (a regular license is $36) this plugin has and adaptive design, and simple to use, though as yet, only for Windows.
This is a fun plugin for adding an interactive element and subtle animated effects to elements on a webpage, whether images or text. It offers 3 choices for animating content: Animation happens on either click, hover, or scroll offset
Once you’ve downloaded and installed it, the plugin button will appear in your visual editor labeled “Animate it”.
Click on the button delivers a popup window where you can select the animation style, and set the animation delay and duration.
Once satisfied, click on the “Animate it” button to see a preview.
Then, click on the insert button to add the animation into the page.
The plugin adds a short code and greek copy to the post editor which needs to be deleted and replaced with whatever you’re wanting to animate, either text, images, or anything else! Click to save and click on Preview to see the results.
ClickAnimate is a powerful plugin tool that allows you to animate——— in one click. No coding necessary. It comes with over 50 unique effects. Page elements swipe in, unfold, hinge down, animate on hoover, added sound effects, and adjustable timing for when animations appear and how long they animate.
A regular license is $19.
You can scroll down this page to see a variety of the effects built in to ClickAnimate.
7. Animated Headline
This is a fun plugin to jazz up your headlines. Animated Headline includes 10 different effects you can apply, such as scaling, rotation, and sliding. It also has a shortcake generator which make it easy use. This is an open-source plugin, and it’s free.
8. Floating Social Media Icons
Floating social media icons are great because they add just a sprinkle of movement to your site, and they keep your social media icons in front of your audience at all times, without being obnoxious. And, since it already comes with smooth floating action built-in, you don’t need to worry about having to create any complex animations yourself.
9. Parallax Scroll
There are WordPress themes that feature parallax as a built in feature, such as Upfront But there is also a plugin that provides the simplest way to get a parallax scroll on a page or post. You can make a full area containing anything with a parallax looking over foundation ore even a single component.
Parallax Scroll Plugin gives you lots more options, and the ability to add a parallax animation to individual elements.
10. Animatrix Creative
This drawing animation WYSIWYG plugin produces animated SVG drawings from your drawings with a transparent background that allows you to add an image or a colored background. It offers many options to create such things as an animated logo design, wireframes and sketches, animated diagrams with arrows and shapes.
You can draw on top of images you have, or use the pencil to draw, or insert a shape from the shapes library. A regular license is $18.
11. Smart Product Viewer
This plugin is great for WordPress e-Commerce sites and produces easy 360* product views and animations. It allows you to showcase a product in detail with a step by step animation and full 360 spin view. It comes with lots of customizable options from which to choose and a regular license is $20.
12. Video Backgrounds
Video Background is a free, open source WordPress plugin for animated background videos, and provides a simple, easy way to add a video background to any element on your website. Background videos are a great way to add excitement and movement to your site. They’re one of the most popular trends in web design, and they don’t have to be daunting, with this WordPress plugin!
A background video can include anything from live action clips to background images with subtle movement. Animation can be added to a header as an svgs file, to animate a logo, or a simple graphic concept.
The trick to a background video is to keep it simple and easy to understand in just a few seconds. The best videos work as a looping display of brand-relatable activity, and also as a stand alone element, especially since most haven’t had sound. But this plugin does offer sound, and muting capabilities, and provides shortcodes for the content editor pages.
You can also do pattern and color overlays, looping and other effects.
The Video Background plugin breaks it down into 4 fields:
• The container, or the specific area you want the video to play in.
To cover the whole website, you enter “body”. To have it in a header, enter “.header”
• The MP4: Link to the .mp4 file. For Safari and IE support
• The WEBM: Link to the .webmfile. For Chrome, Firefox, and Opera support.
• The Poster: This is the fall back image if the video doesn’t play, or is not supported.
No matter which method you pick, adding animation is a positive step to establishing more movement and dynamic engagement!
there are many new forms of animation and interactive animated engagement emerging on numerous platforms that will surely rock our worlds yet to come!
I’ll be installing at least a couple of these right off the bat.
Have animation already, or thinking of adding animation to your site?
Let us know!