How to Bring Your Site to Life with Animations Today

This article is part of a series on tips, tricks, and tools to help businesses better manage their content online and get the most from their content marketing strategies. Click here to view other articles on CMS Tips


In this article, we’re taking a step back from SEO and diving into design. Specifically, how you can use animation on your site to improve your content, where you might have opportunity to use animation, the pros and cons of animations on your overall site experience, and some resources you can use to get animations up and running fast.

Without further ado…

 

Where to use animations in your content

There are plenty of opportunities to make your site better for your users and your bottom line when you use animations.

First, you can use animations to improve your user experience, particularly if you have a developer handy. Skeleton screens, loading sequences, and providing visual feedback are just some of the ways UX can be helped by a bit of movement. But like we said, most of these require a developer who may or may not have time to put them in place.

However, you CAN work animations into your content creation to improve engagement relatively quickly and painlessly in the following ways.

 

The Explainer Video

One of a company’s most valuable content assets (if they make one) is an explainer video.  If you don’t know what an explainer video is, it’s pretty much what it sounds like – a short, usually animated video that explains your service. Gradeleap has a superb one, that you can watch below.

For service (or SaaS) companies, the explainer video is one of the best ways to convey what you do and what value you add. Now, building an animated video is a little beyond the scope of most companies’ capabilities. However, there are plenty of folks you can outsource this work to for as low as $500. Of course, you can also spend up to $50,000 according to Hubspot, but there is a middle ground to be had.

 

Animated infographics

The infographic is already a powerful tool in your content library. There are plenty of resources out there where you can get infographics quickly and easily, and with your professional research skills, you already have the words to make them engaging.

Animations can make your infographics stand out from the crowd though, compel users to keep reading, improve your web page statistics, SEO value, user experience, and ultimately, the value of your content.

Using either dedicated animated infographic tools of multipurpose animation tools (more on that in a minute) you can help take your research and design work further.

 

Gifs

Of all the animations on the internet, the easiest ones to put in place are, without a doubt,  gifs. Whether you’re making a meme to make a point (a la Buzzfeed) or you’re using a gif to demonstrate something in a how-to post, gifs can make your content easier and faster for your audience to understand, as well as making your posts more fun (and interesting!) to read.

What’s more, because gifs function as an image file, they can be put anywhere that a picture can be. This means that if you want to use a gif in your hero image, to be shared on social media, or in your signature at the end of your post, you can.

 

Cons of animations

Of course, while there are a lot of benefits of animations, there are some downsides.

First and foremost, animations are heavy.

They bog down your server if you host them yourself, and they’re heavy to go and get if you host them somewhere else and embed them. For example, according to Digital Inspiration, embedding a YouTube video can increase your website’s weight by 500kB. And while there are other solutions, any embedding will increase the weight (and thus load time) of your site – which is bad.

Second, gifs can cause all sorts of problems, and disrupt an otherwise pleasant user experience. Because of how gifs load, they are often the last elements on the page to start working correctly, by which time your punchy meme might not be relevant anymore.

Finally, animation is — like many things — fine, so long as it’s done in moderation. Too much animation creates a confusing and oftentimes distracting user experience, which usually means that your content doesn’t get read at all.

But with a deft hand, animations can make your content sing.

 

4 Essential Animation Resources

Since most content managers don’t have an enormous amount of animation experience, there’s been a huge range of tools and resources developed to help them. Here are our four favourite tools to create incredible animations.

 

1. GIPHY

GIPHY is a free gif-making tool, letting you borrow, create, caption, and edit gifs all in one place.

With a truly enormous fully searchable database, you’ll probably find what you’re looking for without having to resort to actual creation. But if you do, GIPHY makes it easy, and then hosts the gifs for you. Then, you simply embed your gifs, and you’re done!

 

2. GreenSock

Perhaps not the easiest tool to use, GreenSock makes animation plugins and software for creating HTML5-friendly animations.

If you have a little bit of coding experience (or are willing to spend a few hours watching instructional videos on YouTube) GreenSock can be indispensable to helping you create exactly the animation for your content that you need.

Plus, once you know the basics, you can take your news skills and tweak other parts of your site, improving your user experience with subtle animations.

 

3. Moovly

Moovly runs an animated library that you can take animations and, in a drag and drop editor, create movies.

With Moovly, you can create videos of up to 10 minutes for free, with paid plans progressing after that. Particularly useful for creating explainer videos, Moovly makes it easy. All you need to do is provide the script and you’re away!

 

4. Biteable

Finally, Biteable is another online tool to help you create animated videos.

While it does cost $99 per year, you get access to a massive amount of stock videos, as well as templates you can quickly edit to create the exact content you need, for example, infographics. And while they’re probably reaching when they say it can be done in minutes, it can be done pretty darn quickly.

 

Conclusion

Animations can help you get the most from your content, both with engagement but also as a fantastic medium to tell your brand story. It doesn’t have to be the most complicated piece of animation ever produced. But even a timely gif or a quick 90-second explainer can help you hook your audience and reel them into your website and, ultimately, your business.

Have you got a favourite animation tool that we missed? Let us know in the comments!

Resource Hub