Web Animation Tools and Libraries

It's now easier than ever to create an online presence, however the difficult part can be making your brand stand out against the competition. 

Web animation can play an important part in brand building, this can in turn help get your message front and centre, increase time on page by keeping the user engaged, ensuring that your website doesn't get lost in the unending sea of templated Shopify and Wordpress themes out there. A bespoke website, and on-brand animation can really give you the edge you need to keep those users on-site, and primed to convert.

This becomes evident when you look at some of the biggest brands in the world investing so heavily in animation to showcase their products, introduce new ideas and sometimes, blatantly to just show off what their developers are capable of.

In recent years the animation libraries and tools which are used to create these animations have become far more accessible to the average developer. The range of options has increased too, meaning you can approach what you want to create in a way that suits you.

[newsletter]

ANIME.JS

A relatively recent addition to the world of web animation is anime.js. Released in 2016, anime.js was designed as a lightweight and minimalist alternative to some of the more complex libraries out there.

Its clear to see why it has gained so much popularity recently with its open-source license and great interactive documentation, making it a great starting point for understanding the fundamentals of web animation.

Anime.js seems like a great fit for creating interactive user dashboards when generating graphs and graphics to show information in a more engaging way. It includes good controls and callbacks however has more limited timeline functionality compared to others on this list.

The 3.0 release was launched last year, proving that development hasn't stopped and this library will be maintained well in the coming years.

GSAP

Released 15 years ago, GSAP is the king when it comes to versatility, from simple user interaction to complex and performant canvas animations.

GSAP is the go too for most professionals in the industry, and its clear to see why. The community for GSAP is huge with a wide range of support through tutorials or the active forums.

The library is super robust and feature rich with great controls for SVG manipulation and timeline functionality. With 15 years of development time on the project, many of the issues plaguing developers over the years in terms of browser inconsistencies / bugs have been accounted for and fixed.

However some of that comes at a cost as a lot of the more complex features associated with GSAP coming in the form of plugins which are pay to use.

GSAP 3.0 was released November of last year and brings a wide range of new features to keep the library up to date. The update cleans up and simplifies how you control animations making it much more approachable while halving the file size.

LOTTIE/BODYMOVIN

It’s difficult to compare Lottie to other methods of animation in the industry as the approach is completely different. Lottie is a library developed by airbnb that parses json files created by an after effects plugin named bodymovin.

This may sound complicated but its actually very simple and creates an opportunity for non coders to assist in process of web development.

The only stipulation for learning lottie/bodymovin is having after effects knowledge, once you have this the plugin will export your animations either as a standalone json file or a fully functional html page with your animation included.

The advantage of making animations in this way is that its great for complex animations with a lot of moving parts, the animation can be controlled in after effects which is a far more natural process than coding.

The animations aren't restricted to just the website you created them for either, they can be exported as video and used in social media or marketing, they can be even used in apps or software.

There are some quirks to the way the animation is rendered that may throw off people familiar with after effects, certain features of after effects do not pull through to lottie such as expressions, effects from the effects menu and layer styles.

Which animation library to use?

The best answer i can give for this is to find whatever method suits you best.

If you are looking for small, smooth user interactions you can stick with plain old css animations that are already a powerful tool in itself.

If you are looking to create a complex multi-part animation that requires full control and a timeline then I would suggest something like gsap.

If you don't know how to code and are wanting to add something really standout to your Wordpress or landing page then Lottie and body moving would be perfect for you.

Every method will have its own advantages and disadvantages so finding something that seems right for you and testing it is a great way to start.