Javascript Libraries you should know in 2020 (Part 2)
Tags: javascript, productivity, codenewbie, libraries
Published: 2020-05-18 17:13:57

You can check te first part here: [Part 1](https://dev.to/alvaro_torresc/9-javascript-libraries-you-should-know-in-2020-5535)

The second part (and maybe, not the last one) has finally arrived. I have worked very hard with my TFG and a daily routine with the internship. 

I don't roll up anymore

#**Libraries**

###**Anime.js**

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects.

The most powerful feature of this library is Anime's built-in staggering system makes complex follow through and overlapping animations simple. It can be used on both timings and properties. You can animate multiple CSS transforms properties with different timings simultaneously on a single HTML element. Play, pause, control, reverse, and trigger events in sync using the complete built-in callbacks and controls functions.

Anime.js works with anything web. CSS, SVG, DOM attributes, and JavaScript Objects: animate everything with a single unified API.

{% codepen https://codepen.io/juliangarnier/pen/XvjWvx %}

His website: https://animejs.com

You can check the source code:
{% github juliangarnier/anime %}

**Installation**
Npm
```
npm install animejs --save
```

###**Three.js**

Three.js is the world's most popular JavaScript framework for displaying 3D content on the web, providing you with the power to display incredible models, games, music videos, scientific and data visualizations, or pretty much anything else you can imagine, right in your browser and on your smartphone!

I think as it is of significant visual importance, we had better look at graphic examples

[Example 1](https://threejs.org/examples/#webgl_animation_cloth)
[Example 2](https://threejs.org/examples/#webgl_interactive_cubes)
[Example 3](https://threejs.org/examples/#webgl_materials_standard)

His website: https://threejs.org

You can check the source code:
{% github mrdoob/three.js %}

###**AOS**

AOS (Animate On Scroll Library) is a lightweight library that allows us to animate div or these types of containers with curious movements like flip or fade.

His website: https://michalsnik.github.io/aos/

{% codepen https://codepen.io/michalsnik/pen/WxNdvq %}

In his website, you can check many other examples of what this library can do.

You can check the source code:
{% github michalsnik/aos %}

**Installation**
Npm
```
npm install --save aos@next
```

###**Cleave.js**

Cleave.js has a simple purpose: to help you format input text content automatically.

####**Features**
[x] Credit card number formatting
[x] Phone number formatting
[x] Date formatting
[x] Numeral formatting
[x] Custom delimiter, prefix and blocks pattern
[x] CommonJS / AMD mode
[x] ReactJS component
[x] AngularJS directive (1.x)
[x] ES Module

This is an example: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/83yblk5660ppe4tqizhf.PNG)

His website: https://nosir.github.io/cleave.js/

You can check the source code:
{% github nosir/cleave.js %}

**Installation**
Npm
```
npm install --save cleave.js
```

###**Granim.js**

Granim.js is a library to create fluid and interactive gradient animations with this small javascript library.

This is an example: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g88hmrv53m30h1gsysg0.png)

His website: https://sarcadass.github.io/granim.js/

You can check the source code:
{% github sarcadass/granim.js %}

**Installation**
Npm
```
npm install granim --save
```

###Remember,it´s possible I will write another part of this post, with another 5 libraries

- - -

_Follow me on [Twitter](https://twitter.com/torresc_alvaro) if you want to know about my future articles, projects or whatever_