UI Development

JavaScript Animation Engine – AnimeJS

AnimeJS is a lightweight JavaScript animation engine (14kb minified, and only 6kb gzipped). It works with any CSS properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

Animators can have fun using this tool to make games, short films and other types of media. The tool really comes into its own when making games as animations and objects are much easier to render and the effects that can be added are pretty cool. One of the great things about Anime.js is that it is easier to use compared with tools of this type and comes with a handy tutorial.

Let’s go ahead to anime.js site. In the documentation, there are a lot of code examples along with their implementations.

You’ll be able to use AnimeJs to create awesome animations

 

Fundamentals of JavaScript animation

We shall start by creating an Anime object in which we can describe our animation.

The basic structure of this object is as follows

Animation Targets

  • We use targets to tell Anime how to find elements on the page.
  • We can assign Class name or Id for it

Property Values

  • By specifying a single numeric value for a property, Anime is going to assume that you want to use the element’s unit (unitless). It will also use the element’s initial default value for the animation.
  • You can specify the initial value of the property explicitly by setting the value to an array. For example, you can animate the x position from 50 to 200 by simply using an array: translateX: [50, 200].
  • You can also use a function for any property:

              translateX: (elm, index, t) => index * 2

  • Using a function enables you to programmatic set the animation properties of an elements

Animation Properties

The most common animation properties are duration and easing functions:

  • You can set the duration of animation using the duration property. If no duration is specified, Anime will default to 1000ms.
  • Using the easing function you can determine how values would change over time. The easing by default is set to easeOutElastic

Getting Started

To install AnimeJS

Via npm

npm install animejs --save

OR

Via bower

bower install animejs

OR

manual download @ https://github.com/juliangarnier/anime/archive/master.zip

OR

link it through cdn

Usage

ES6 modules

import anime from 'lib/anime.es.js';

File Include

Link anime.min.js in your HTML :

<script src="anime.min.js"></script>

Let’s add the following code snippet into our HTML <body>

<div class='main'>
  <div class='loader'>
    <div class='round-indicators loader-1'></div>
    <div class='round-indicators loader-2'></div>
    <div class='round-indicators loader-3'></div>
    <div class='round-indicators loader-4'></div>
  </div>
</div>

SASS:

$bg-color:#111116;
$radius:32px;
$border:4px;
$loader1-color:#FC1460;
$loader2-color:#5A87FF;
$loader3-color:#18FD91;
$loader4-color:#FBF38C;

body {
	background-color: $bg-color;
}
.main {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	}
.round-indicators {
	display: inline-block;
	width: $radius;
	height: $radius;
	border-radius: 50%;
	margin: 0 4px;
}
.loader-1 {
	border: $border solid $loader1-color;
}
.loader-2 {
	border: $border solid $loader2-color;
}
.loader-3 {
	border: $border solid $loader3-color;
}
.loader-4 {
	border: $border solid $loader4-color;
}

Creating Animations

The first step is to initialize the anime object:

var circle1 = anime({
    targets: ['.loader-1'],
    translateY: -24,
    translateX: 52,
    direction: 'alternate',
    loop: true,
    elasticity: 400,
    easing: 'easeInOutElastic',
    duration: 1600,
    delay: 800,
});

var circle2 = anime({
    targets: ['.loader-2'],
    translateY: 24,
    direction: 'alternate',
    loop: true,
    elasticity: 400,
    easing: 'easeInOutElastic',
    duration: 1600,
    delay: 800,
});

var circle3 = anime({
    targets: ['.loader-3'],
    translateY: -24,
    direction: 'alternate',
    loop: true,
    elasticity: 400,
    easing: 'easeInOutElastic',
    duration: 1600,
    delay: 800,
});

var circle4 = anime({
    targets: ['.loader-4'],
    translateY: 24,
    translateX: -52,
    direction: 'alternate',
    loop: true,
    elasticity: 400,
    easing: 'easeInOutElastic',
    duration: 1600,
    delay: 800,
});

We will provide certain properties to instruct what and how the elements should animate.

  • targets’ property defines the elements to animate
  • ‘translateX‘ moves the elements in a horizontal direction
  • ‘translateY‘ moves the elements in a vertical direction
  • ‘duration’ defines how long the animation lasts
  • ‘easing’ function you can determine how values would change over time
  • ‘loop’ defines whether the animation must continuously loop or play once
  • ‘delay’ gives a pause of certain time specified in milliseconds
  • ‘elasticity’ means, that the animation won’t stop abruptly once it’s done, but oscillates instead. This allows users to create very natural looking movements.

Output

 

Wrapping Up

Anime JS is easy to use and fun. You can create smoother animations, simple and complex SVG and CSS and the API is also very easy to follow.

I hope you will enjoy working with Anime.js!

Thanks for reading. Comments are welcome

About The Author