A great method to engage users in your project and give it life is through animation. In this post, I'll walk you through some of the top libraries using plain JavaScript and CSS, independent of any framework, to make eye-catching animations.
Before we move on, remember you can implement your websites or landing pages with or without coding on DoTenX for free. Make sure to check it out and even nominate your work to be showcased. DoTenX is open-source and you can find the repository here: github.com/dotenx/dotenx.
Let's start now.
animate.css
This is a very simple library that you can easily use which allows you to add purely CSS-based animations to your websites. With only one line of code, you can apply a range of pre-made animation classes to your objects.
Advantages:
Simplicity animate.css is perhaps the easiest option to use and requires minimal setup. All you need to do is to import the library in your project and just add the animation classes to your elements.
Large selection of animations: It includes a large selection of pre-designed animation classes, such as fade, slide, bounce, and much more.
Biggest challenges:
Limited options to customize: Despite offering a large set of animation classes, it doesn't offer much customization over the duration, timing, or other properties of the animations.
Also, the library is 72KB which is too much for what it does.
Example:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
...
<div class="animated fadeIn">Hello, world!</div>
W3.CSS
https://www.w3schools.com/w3css/default.asp
Advertised as "A Quality Alternative to Bootstrap" which "is Smaller, Faster and Easier to Use", another library that provides a good variety of CSS-based animation classes you may use to provide visual effects on your website is w3.css. Additionally, it offers other features like grid layouts and responsive design.
Advantages and disadvantages of w3.css are similar to animate.css, just with an extra advantage which is the extra features such as responsive design and grid layouts offered by w3.css you can use to build your websites.
Worth mentioning w3.css is just 22KB.
Example:
<head>
<link
rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css"
/>
</head>
...
<div class="w3-animate-top">Hello, world!</div>
AniJS
AniJS, is another library to use to create really cool and advanced animations with a lot of options. It allows you to set the animation type, duration, and other options using data-anijs data attibutes.
Advantage:
Customizable: You can use data attributes to customize many options of the animation such as its type, duration, when to start and much more.
Disadvantages:
Complicated syntax: The syntax of AniJS, while giving it the power that it has, makes it too complex for simpler scenarios.
Installation: It takes some extra steps to install AniJS compared to other libraries.
Example:
In your HTML page:
<head>
<!-- AniCollection.css library (optional) -->
<link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css">
</head>
...
<div data-anijs="if: mouseover, do: swing animated">Hello, world!
</div>
In your Javascript:
/* Check https://anijs.github.io/#installing for instructions */
<script src="anijs-min.js"></script>
GreenSock Animation Platform (GSAP)
This library is best described by the creators: "A robust Javascript toolset that turns developers into animation superheros".
This powerful library offers heaps of animation capabilities, including support for timeline-based and complex sequencing animations.
(This library deserves a specific post, so stay tuned.)
Advantages:
High performance: To many developers, the performance and smoothness of the animations created by GASP make this library their number one choice.
Advanced features: Timeline-based animations and complex sequencing are just a few of the options you have when you use GASP to create advanced animations.
Strong community: The library is very popular and widely used by many developers giving it the advantage of a large community.
Disadvantages:
Steep learning curve: With power comes a steep learning curve!
Larger file size: If keeping your website as lean as possible is a high priority for you, perhaps GSAP is not the best option for you.
Example:
HTML:
<div id="animation">Hello, world!</div>
Javascript:
<script src="gsap.min.js"></script>
<script>
gsap.to("#animation", { duration: 1, x: 100, y: 100 });
</script>
Magic Animations
https://www.minimamente.com/project/magic/
This is a tiny library (3.1KB gzip), which offers a limited set of simple animations such as fade, slide, and bounce, which allows you to create a wide range of effects.
The pros and cons of this library are very similar to those of animate.css, and similar to animate.css, on the website you can directly see every animation they offer.
Example:
In your HTML page:
<div class="magic animated fadeIn">Hello, world!</div>
In your Javascript:
<script src="magic.min.js"></script>
Velocity.js
This library is also best described by its developrs: "Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined."
Advantages:
On top of what we mentioned for libraries like animate.css, Velocity.js is famous for its fast performance and smooth animations, making it a popular choice for professional web developers.
Remember this library offers a much more advanced set of animations compared to purely css based libraries like animate.css.
Disadvantage:
The biggest disadvantage/challenge is that not as simple magic animations or animate.css.
Example:
In your HTML page:
<div id="animation">Hello, world!</div>
In your Javascript:
<script src="velocity.min.js"></script>
<script>
Velocity("#animation", { width: 100 }, 1000);
</script>
KUTE.js
This high-performance library offers a large set of animation types, such as fade, slide, and rotate. Again, this library is much more advanced than libraries like animate.css, especially they offer nice animations for working with SVGs.
Advantages and disadvantage:
Advanced set of animations to work with SVGs, apply different transformations with customisable parameters while being very efficient are the major advantages of this library. The library also has a great documentation for every single component.
If you're looking for the simplest option possible, perhaps animate.css wins the competition.
Example:
HTML:
<div id="animation">Hello, world!</div>
Javascript:
<script src="kute.min.js"></script>
<script>
KUTE.to("#animation", { rotate: 360 }, { duration: 1000 });
</script>
Mo.js
Mo.js offers a rich set of APIs to create advanced and smooth animations with various effects.
Advantages and disadvantages:
The advantages and disadvantages of this library are very similar to GASP, with the major difference being Mo.js is offered under MIT license which makes it a better choice if you want to make sure you can use the library for free under all circumstances.
Example:
In the HTML page:
<div id="animation">Hello, world!</div>
In your Javascript:
<script src="mo.min.js"></script>
<script>
var animation = new mojs.Html({
el: "#animation",
x: { 0: 100 },
duration: 1000
});
animation.play();
</script>
Dynamics.js
Dynamics.js is the "JavaScript library to create physics-based animations". The library gives you unmatched control over the options you can use to create realistic animations.
Advantages:
Simple syntax and the ability to create sophisticated and realistic animations are the main advantages of this library.
Disadvantages:
This library is created for physics-based animations so it's not really the best replacement for libraries offering typical animations, also the documentation is not that great.
Example:
HTML:
<div id="animation">Hello, world!</div>
Javascript:
<script src="dynamics.min.js"></script>
<script>
dynamics.animate(document.getElementById("animation"), {
translateX: 100
}, {
type: dynamics.spring
});
</script>
Anime.js
Anime.js is a lightweight library to create eye-catching custom animations with a simple syntax.
Advantages and disadvantages:
The pros and cons of Anime.js are very similar to Dynamics.js, however, this library offers a significantly better documentation.
Example:
In your HTML page:
<div id="animation">Hello, world!</div>
Javascript:
<script src="anime.min.js"></script>
<script>
anime({
targets: "#animation",
translateX: 100,
duration: 1000
});
</script>