DEV Community

loading...
Cover image for Javascript Libraries you should know in 2020 (Part 2)

Javascript Libraries you should know in 2020 (Part 2)

alvarotorresc profile image Alvaro Torres Carrasco Updated on ・3 min read

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:

GitHub logo juliangarnier / anime

JavaScript animation engine


anime.js

JavaScript animation engine | animejs.com

npm version npm downloads

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 --save

or 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

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

Example 1
Example 2
Example 3

His website: https://threejs.org

You can check the source code:

GitHub logo mrdoob / three.js

JavaScript 3D library.

three.js

NPM Package Build Size NPM Downloads Dev Dependencies Language Grade

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.

ExamplesDocumentationWikiMigratingQuestionsForumSlackDiscord

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:

GitHub logo michalsnik / aos

Animate on scroll library

AOS - Animate on scroll library

NPM version NPM downloads Build Status Gitter

Twitter Follow Twitter URL

This is README for aos@next

For last stable release (v2) go here


🚀 Demo

🌟 Codepen Examples

👉 To get a better understanding how this actually works, I encourage you to check my post on CSS-tricks.


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:
Alt Text

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

You can check the source code:

GitHub logo nosir / cleave.js

Format input text content when you are typing...

Cleave.js

Travis Codacy Badge npm version npm downloads Documents

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.js

CDN

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:
Alt Text

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

You can check the source code:

GitHub logo sarcadass / granim.js

Create fluid and interactive gradient animations with this small javascript library.

Granim.js Build Status codecov gitter

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

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

Discussion (7)

pic
Editor guide
Collapse
blackr1234 profile image
blackr1234 • Edited

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.

Collapse
bernardbaker profile image
Bernard Baker

This is very handy. Great content.

Collapse
alvarotorresc profile image
Alvaro Torres Carrasco Author

Thanks for your feedback!

Collapse
bernardbaker profile image
Bernard Baker

It had a library that I needed.

Collapse
thisdotmedia_staff profile image
This Dot Media

Love both articles! Great insight Alvaro

Collapse
alvarotorresc profile image
Alvaro Torres Carrasco Author

Thanks! I try to find the most useful libraries that can help everyone

Collapse
thisdotmedia_staff profile image
This Dot Media

Yes! It's really awesome, since it's not always easy narrowing it down or knowing what to focus on