How to animate sections of your website
Having items animate as they scroll into the viewport can add that extra bit of pop to your website!
There are many different ways to add animations to your website.
You could use a Javascript library, a pre-built animation script or one of many free and premium WordPress plugins.
Check out our animation plugins for WordPress
How does animation work on your WordPress site?
Most animation plugins for WordPress rely on Javascript and CSS to work.
The scripts calculate when the HTML item enters the viewport (your screen) and then apply an effect to the element using CSS.
Some WordPress plugins can be quite complex to use and require you to have at least some understanding of code to make them work correctly.
Why might you want to animate elements of your site?
There’s more to animate elements on your website to make them look good!
Well placed animations on the scroll of a page can help you to draw the visitors eye to an important piece of information.
Most animation plugins will allow you to:
- Select an item on your page and choose from a range of animations to apply to it when it enters the viewport
- Choose the speed of the animation
- Choose the style of animation
- Select a delay time for the animation – this is handy if you want to stagger the effect over more than one element
- Select whether the animation should happen once or every time the element enters the viewport
- Choose the screen sizes on which the scroll animations should work
Using animations on your website certainly does give it a more professional look, but it’s important not to overuse them.
Things to watch out for with animation plugins for WordPress.
Whenever you add plugins to your WordPress site, they load additional files that can make your website slower.
It’s important to consider if the functionality you are adding is worth the additional load time on your site.
Remember that search engine robot that index your site don’t really care whether anything is animated – they are interested solely in the content on your site and whether it’s a good match for the users’ search query.
What they do care about is how long your website page takes to load, so it’s a good idea to check this once you’ve installed a new plugin.
We recommend doing the following:
- Run a speed test on your site (such as Google’s Page Speed Insights) before you add the plugin
- Install the plugin, set it up and then run the page speed test again
- See what difference the plugin installation has made to your site
- If you see a lower speed score or more render-blocking issues than before you installed it, consider how important it is
Consider everything from the users perspective.
If your brand needs a flashy, animated website then it’s probably worth installing an animation plugin.
If your competitors’ websites are also animated, you could argue that yours needs to be too so you are perceived to be similar.
However, if your users are looking for facts, pure information or answers, they may not be swayed or impressed by animated elements on your website – animations may even frustrate these users as they are simply not needed.
Can you animate your site if you are not a developer?
Some animation scripts for your website will need a developer to install.
Scripts that are non-plugin based will require FTP access to your site and a lot more configuration.
A lot of WordPress plugins to animate elements of your website can also be quite complex to set up, whereas others are straightforward plug-and-play plugins that most non-technical website owners can use.
We develop our plugins to be easy for all users to install and configure. With the minimum of effort, you’ll be animating parts of your website in no time!
Conclusion.
It’s best to think about everything from the perspective of your visitor and the speed of your site.
If your product or service requires it, then it’s worth animating aspects of your site to impress your audience.
If speed and rankings are the most important, it might not be worth adding the additional load time to your site (or at least using a plugin that’s optimised to not slow your site down).
