We all like fireworks, because they are wonderful, flashy and spectacular. The problem comes if we see fireworks every day, or if they throw them all at the same time.
You imagine? It wouldn’t have the same beautiful effect!
I tell you this because the topic we are going to discuss today in this article is a double-edged sword.
If used well, you can increase those clicks in the shopping cart, in the email log to receive a newsletter, or any other type of call to action that you have configured on your website.
If it is misused, you will cause the opposite effect: the user will be confused with so much movement and effect, that he will not know where he has to click, and as your website will “make him think”, he will abandon it.
(Remember that a user on the Internet is lazy and does not like to think, he prefers to be told where to click or what action to take).
Throughout the article you will find several ways to animate the content of your website, to add certain dynamic “effects” to the elements you want.
Keep reading and pay close attention, because maybe you don’t see it now, because you’ve never worked with WordPress animations, but you may be very interested.
Table of content:
- When to animate elements on a web?
- Plugin Animation
- Master Slider – Responsive Touch Slider
- Animation with Page Builders
- CSS animation
- Animation through animation plugins
- Animation plugin in general
- Plugin to animate page loading
- Plugin to animate images
- Plugins to animate text and titles
- Plugin to create progress bars
- Special Review: CSS Hero Animator
When to animate elements on a web?
Personally I am not very much in favor of adding too many elements that confuse the user.
I understood this when I reformed my house. The interior designer made it very clear to me: when you enter a house, and notes that you do not like, it is because there are too many elements that distract attention, and your eyes do not know where to look first, and that creates an uncomfortable feeling in the brain.
However, when you enter a house, and everything is ” in balance “, the eyes go directly to a specific point in the room where you are (a beautiful table, a striking painting, an original sculpture, etc).
Do you remember the web that Homer Simpson made in the series? What would you not know exactly where to click?
A good website has to have a clear CTA (Call to Action), and in my opinion this is the key point to make use of animation.
Also keep in mind that animations are not highly recommended on mobile (only the most subtle), as they can alter the user experience from these devices.
Below I describe types and ways to animate practically what you want, on your WordPress website.
Many plugins already come with small options inserted in control panels, which allow you to add animated effects.
For example, a plugin to create a slider will allow you to select between different transitions. A plugin to create a gallery will allow you to select if you want to zoom in the image if you “hover” the mouse over, etc.
This is an example of a plugin to create sliders, with which you can “play” yourself and see what animations you have available to display on your website.
Animation with Page Builders
If what you use is a good Page Builder (I take the opportunity to hug you, because it is the best thing you can do in WordPress today), the good news is that they all come with different integrated series animations, and you can add more through extensions.
The bad news is that if you only consider using a Page Builder, because you want to use animations, I do not advise you to go that way (with an animation plugin you have plenty).
Each Page Builder has its own animation settings (they are usually in the advanced options, since they are not used much), and as I use (and it is my main work tool), I show you a screenshot of where they are located the animation options in Beaver Builder.
The animation by CSS is possible, obviously, although it requires certain knowledge of CSS code (very few).
We will not see it here, being somewhat advanced, but I want to comment on how it works.
There are resources available to everyone, which have many previously created effects.
These “libraries”, have to be installed in your WordPress, in the files of the Theme you are using, and through a PHP line in the functions.php file, “tell” the Theme to also load that CSS library, so those effects they will be “available” in the event that some element “calls them”.
And what is a specific CSS class “called” in a specific element?
To apply these effects to a specific element, in the HTML code, you have to indicate what class that element uses.
If an element, for example an image, you want to apply a CSS class called rotate180, because that class rotates the element when it appears on the web, the code would look like this:
<img class = “rotate180” src = “urldetuimagen.png”>
As you can see it is not something super mega complicated, but if you do not know anything about CSS or HTML, it may sound like Chinese.
If you dare to fiddle a little with your website, I recommend you try this CSS library: Animate.CSS
Animation through animation plugins
Now it’s time to talk about “the easy thing”, which is to use specific plugins to animate elements on your WordPress website.
It is advisable to use them, if you are not using any Page Builder, and do not want to reload the web too much. Although remember, do not go beyond the line putting unnecessary animations.
Animation plugin in general
The most famous plugin I’ve found to animate the elements of your website is called Animate it, and it looks great.
It has the typical effects of web animations, and it may help you to animate and give visibility to that super CTA that so many subscribers or sales will report to you.
By the way, its operation is very intuitive, and what it does “for you” is everything commented on in the previous CSS part, in a very visual way and without the need for technical knowledge.
On its download page there is a video, so you can see how it works.
Plugin to animate page loading
Thanks to this plugin, the pages of your website can have an animation in the transition when passing from one to another by clicking on any link.
You can also include a “pre-loader” to the web site, so that there is an animation of “loading”, so that the visitor sees the web already loaded (it is a good feeling).
Of course, it may consume some extra resources, or may not end up liking people, if that “loading” animation takes, ironically, a lot to load.
Here is the link to the plugin called Page Animations And Transitions
Plugin to animate images
This plugin is more focused on animation of how images are displayed on your website.
It has more than 40 effects when hovering over an image, and it is very easy to apply to your content.
The plugin is called Image Hover Effects.
Plugins to animate text and titles
Just like the previous plugin is for a very specific element, this plugin is also for another element: texts and titles.
With this plugin you can add that effect of “typing” (a word being written), which in some parts of the web looks great (as for example in a Hero).
The plugin is called Typing Effect.
Plugin to create progress bars
Have you seen any progress bars or numbers with circles that move around you? Well with this plugin you can get it.
Install the plugin, and look at its documentation (it’s intuitive don’t worry). You can create those animated graphics very easily.
The plugin is called SKT Skill Bar.
Special Review: CSS Hero Animator
And after seeing all these plugins in the previous section, I will quickly analyze one that I particularly liked (I discovered it recently, at the time of writing this article).
You can download it here CSS Hero Animator.
To download it you will be asked for your email, because they will send it to your inbox after “activating” your free subscription to your mailing list.
Being free, it is a very good way to “catch” the odd email, of people really interested in your plugin.
To say that these developers have not contacted me or offered anything to talk about their plugin, I just like it. What I do not agree with is the steps to download it, yes.
The theme of animations for a web page, today is quite common.
But of course, they can be applied in a very productive way (if it is to incite to click on a CTA), or very harmful for your website if there are several animated elements that divert the attention of your user, and do not contribute anything to the achievement of your goals
Plugins specifically dedicated to animating the content, usually work through shortcodes, and the great “but” is that if you decide to remove the plugin, some spaghetti code (which is no use and is a mess) will remain on your website.
What I recommend is to try to use a good Page Builder, like Beaver Builder (I insist again that I am not paid to say this, if not that it is my work tool), and if you do not need something as powerful as that tool, use a very specific and very well programmed plugin (does not leave spaghetti code ), as is the CSS Hero (that’s why I analyzed it independently of the others).
Encouragement with this of the animations (I feel the bad joke), and I hope that this analysis has cleared your mind a little, if you had planned to implement animations on your website.
I hope you liked it as much as I wrote it, and see you in the next article!