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:
juliangarnier
/
anime
JavaScript animation engine
anime.js
JavaScript animation engine | animejs.com
Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects
Getting started | Documentation | Demos and examples | Browser support
Getting started
Download
Via npm
$ npm install animejs --saveor manual download.
Usage
ES6 modules
import anime from 'animejs/lib/anime.es.js';CommonJS
const anime = require('animejs');File include
Link anime.min.js in your HTML :
<script src="anime.min.js"></script>Hello world
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});Documentation
- Targets
- Properties
- Property parameters
- Animation parameters
- Values
- Keyframes
- Staggering
- Timeline
- Controls
- Callbacks and promises
- SVG Animations
- Easing functions
- Helpers
Demos and examples
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
His website: https://threejs.org
You can check the source code:
three.js
JavaScript 3D library
The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.
Examples — Documentation — Wiki — Migrating — Questions — Forum — Slack — Discord
Usage
This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.
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:
michalsnik
/
aos
Animate on scroll library
❗ ❗ ❗ This is README for aos@next ❗ ❗ ❗
For last stable release (v2) go here
🚀 Demo
🌟 Codepen Examples
- Different built-in animations
- With anchor setting in use
- With anchor-placement and different easings
- With simple custom animations
⚙ Installation
Basic
Add styles in <head>:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />Add script right before closing </body> tag, and initialize AOS:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>Using package managers
Install aos package:
yarn add aos@next- or
npm install --save aos@next
Import script, styles and initialize AOS:
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:
Cleave.js
Cleave.js has a simple purpose: to help you format input text content automatically.
Features
- Credit card number formatting
- Phone number formatting (i18n js lib separated for each country to reduce size)
- Date formatting
- Numeral formatting
- Custom delimiter, prefix and blocks pattern
- CommonJS / AMD mode
- ReactJS component
- AngularJS directive (1.x)
- ES Module
TL;DR the demo page
Why?
The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.
However, this isn't meant to replace any validation or mask library, you should still sanitize and validate your data in backend.
Installation
npm
npm install --save cleave.jsCDN
cleave.js is available on jsDelivr and on cdnjs.com
old school
Grab file from dist directory
Usage
Simply include
<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:
sarcadass
/
granim.js
Create fluid and interactive gradient animations with this small javascript library.
Granim.js 
Create fluid and interactive gradient animations with this small javascript library.
See the demo site.
Install
From NPM
- Run
npm install granim --save
From Bower
- Run
bower install granim
Static
- Download the latest version in the release section
How to use
<!-- 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
Top comments (7)
This is very handy. Great content.
Thanks for your feedback!
It had a library that I needed.
Awesome! Thanks for sharing. I am so surprised when I see mrdoob/three.js. This is something I do not see normally on websites. I think it will be a game changer. We no longer need standalone iOS/Android apps to render complex 3D objects. The AOS one seems to be useful for writing a parallax website.
Love both articles! Great insight Alvaro
Thanks! I try to find the most useful libraries that can help everyone
Yes! It's really awesome, since it's not always easy narrowing it down or knowing what to focus on