You can check te first part here: Part 1

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.

His website: https://animejs.com

You can check the source code:

$ npm install animejs --save

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

const anime = require('animejs');

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

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

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
Example 2
Example 3

His website: https://threejs.org

You can check the source code:

import * as THREE from './js/three.module.js';
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / 

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/

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

You can check the source code:

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
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:

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

You can check the source code:

npm install --save cleave.js

<script src="cleave.min.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:

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

You can check the source code:

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

<!-- Call the script -->
<script src="granim.min.js"></script>

<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>

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 if you want to know about my future articles, projects or whatever