Animations, if used wisely, can take the user experience of your websites to a whole different level, and while it might sound intimidating at first, thanks to libraries like anime.js you can create amazing effects with a little practice.

Welcome to the first tutorial in this series on animating with anime.js! In this tutorial, I'll cover the basics of getting set up with anime.js and creating simple animations. By the end of this tutorial, you should have a solid foundation for building more complex animations with anime.js in the future.

Before we dive in, let's quickly go over what anime.js is and why you might want to use it. anime.js is a lightweight JavaScript library that makes it easy to create complex, high-performance animations on the web. It has a simple, intuitive API and a wide range of features that allow you to create a variety of different types of animations, from simple fades and slides to more complex morphing and path-based animations.

Before we move on, remember you can build your websites, landing pages, APIs, and more, 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.

Now let's get started.

Step 1: Set up the Environment

To use anime.js, you have to include the library in your HTML file. There are a few different ways to do this:

1. Download the minified version of library from the anime.js website and include it in your project manually.

2. Use a CDN (Content Delivery Network) to include the library in your HTML file. This is the easiest and fastest way to get started. Just add the following script tag to the head of your HTML file:
   

   <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
   

3. Install the library using npm and import it into your project. This is the best option if you're building a larger project and need a more advanced way to manage your dependencies. You can install anime.js using npm by run the following command in your terminal:
   

   npm install animejs
   

   Once the package is installed, you can import it like this:
   

   import anime from 'animejs';
   

Step 2: Create a Basic Animation

Now that we have set up the library let's create the first animation. We start with the simplest animation we can create with anime.js tha just changes a single CSS property over time. Let's create a "fade-out" effect:

<h1 id="my-element">Anime.js</h1>

anime({
  targets: '#my-element', // the element to be animated
  opacity: 0,
  duration: 1000,  // duration in milliseconds
});

anime method animates the element specified in the targets property and sets it opacity to 0 throughout 1000 milliseconds.

Step 3: Animate multiple CSS properties

We can pass multiple CSS properties to anime method and create more complex animations.

Note: Most CSS properties will cause layout changes or repaint, and will result in choppy animation. Prioritize opacity and CSS transforms as much as possible.

anime({
  targets: '#my-element',
  opacity: 0.5,
  marginLeft: '200px',
  duration: 3000,
});

This animation will fade out the heading text and at the same time move it from its initial position to the right for 200 pixels.

Step 4: Create animation with transforms

We can also use any of the properties in this table to make animations with transforms:

Now let's change the element a bit so we make the animation more visible and apply some transform changes.

<div id="box">
    <h1>Anime.js</h1>
</div>

#box {
  margin-left: 200px;
  margin-top: 200px;
  width: 100px;
  height: 100px;
  background: red;
}

anime({
  targets: '#box',
  translateX: 450,
  duration: 3000,
});

You can use multiple transforms as well in an animation:

anime({
  targets: '#box',
  translateX: 450,
  scale: 2,
  rotate: '2turn',
  duration: 3000,
});

Step 5: Animate Numbers

With anime.js you can easily animate numberic values as well as CSS properties or transforms. The simples way to animate numbers is to define an object that defines the initial values and animate them.

<h1 id="counter"></h1>
<h1 id="portion"></h1>

var counterEl = document.querySelector('#counter');
var portionEl = document.querySelector('#portion');

var numbers = {
  counter: 0,
  portion: '0%'
}

anime({
  targets: numbers,
  counter: 50,
  portion: '100%',
  easing: 'linear',
  round: 1,
  update: function() {
    counterEl.innerHTML = numbers.counter;
    portionEl.innerHTML = numbers.portion;
  }
});

This will animate the elements' innerHTMLs from 0 and 0% to 50 and 100%. We also use the update callback function to update the numeric values in real-time as the animation progresses.

Step 6: Animate SVGs

Anime.js allows you to animate any DOM attributes, including attributes of SVGs. Let's create an interesting animation with a simple SVG.

<svg width="200" height="200">
    <path d="M10,10 L190,10 L10,190 Z" fill="#00f" />
</svg> 

anime({
  targets: 'svg path',
  d: [
    {value: 'M10,10 L190,10 L10,190 Z'},  // starting path
    {value: 'M10,10 L10,190 L190,10 Z'},  // ending path
  ],
  duration: 2000,
  easing: 'easeInOutQuad',
  loop: true,
});

This was the first article in this series which will have 5 articles, and you should already be able to create eye-catching animations with what you learned in this tutorial.

In the next tutorial, we'll go through animation techniques with anime.js and I'll explain timing, easing and keyframes, so stay tuned.

Don't forget to visit DoTenX and soon a dedicate animation section will be added to the platform allowing you to create amazing animations with the concepts you learned here. Keep an eye on the Github repository for the new release.