10 Of The Most Amazing JS Libraries That Almost You Will Enjoy Using Them In Your Project!
Tags: javascript, typescript, webdev, tutorial
Published: 2021-08-14 23:27:38

Hello everybody, I'm [Aya Bouchiha](developer.aya.b@gmail.com), in this post, I'll share with you 10 amazing javascript libraries. 

## Chart.js

**Chart.js** is an open-source library that lets you visualize data.

+ [github](https://github.com/chartjs/Chart.js)
+ [docs](https://www.chartjs.org/docs/)
+ [demo](https://www.chartjs.org/docs/latest/samples/bar/vertical.html)
+ [tutorial](https://www.youtube.com/watch?v=sE08f4iuOhA)

### cdn

```html
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
```

### npm 

```shell
npm i chart.js
```

## Anime.js

**Anime.js**: is one of the most popular libraries which adds awesome animations to your web application.

+ [github](https://github.com/juliangarnier/anime)
+ [docs](https://animejs.com/documentation/)
+ [tutorial](https://www.youtube.com/watch?v=g7WnZ9hxUak&t=934s)

### cdn

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

### npm 

```shell
npm i animejs
```

## D3.js

**D3.js** is a JavaScript library for manipulating documents based on data.

+ [github](https://github.com/d3/d3)
+ [docs](https://d3js.org/)
+ [tutorial](https://www.youtube.com/watch?v=_8V5o2UHG0E)(13h!)

### cdn

```js
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js" integrity="sha512-0x7/VCkKLLt4wnkFqI8Cgv6no+AaS1TDgmHLOoU3hy/WVtYta2J6gnOIHhYYDJlDxPqEqAYLPS4gzVex4mGJLw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

### npm

```shell
npm i d3
```

## GSAP

+ **GSAP** is one of the most famous libraries that animates anything JavaScript can touch, such as CSS properties and SVG.

+ [github](https://github.com/greensock/GSAP)
+ [docs](https://greensock.com/docs/)
+ [demo](https://greensock.com/showcase/)
+ [tutorial](https://www.youtube.com/watch?v=YqOhQWbouCE&t=4s)

### cdn

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js" integrity="sha512-UxP+UhJaGRWuMG2YC6LPWYpFQnsSgnor0VUF3BHdD83PS/pOpN+FYbZmrYN+ISX8jnvgVUciqP/fILOXDjZSwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

### npm

```shell
npm i gsap
```

## vivus.js

**vivus**: is a lightweight JavaScript class that gives SVGs the appearance of being drawn.

+ [github](https://github.com/maxwellito/vivus)
+ [demo](http://maxwellito.github.io/vivus/)

### cdn

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js" integrity="sha512-oUUeA7VTcWBqUJD/VYCBB4VeIE0g1pg5aRMiSUOMGnNNeCLRS39OlkcyyeJ0hYx2h3zxmIWhyKiUXKkfZ5Wryg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

### npm 

```shell
npm i vivus
```

## TypeIt.js

**TypeIt**: is a JavaScript tool for creating typewriter effects.

+ [github](https://github.com/alexmacarthur/typeit)
+ [docs](https://typeitjs.com/docs)
+ [demo](https://typeitjs.com/#examples)
+ [tutorial](https://www.youtube.com/watch?v=FM6cLucUqlw)

### cdn

```html
<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
```

### npm

```shell
npm i typeit
```

## dropzone.js

**Dropzone** is a JavaScript open-source library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone will display file previews and upload progress, and handle the upload for you via XHR.

+ [github](https://github.com/dropzone/dropzone)
+ [docs](https://dropzone.gitbook.io/dropzone/)
+ [demo](https://www.dropzonejs.com/)
+ [tutorial (with django)](https://www.youtube.com/watch?v=jUtCtlCRAT4&t=869s)

### cdn

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js" integrity="sha512-VQQXLthlZQO00P+uEu4mJ4G4OAgqTtKG1hri56kQY1DtdLeIqhKUp9W/lllDDu3uN3SnUNawpW7lBda8+dSi7w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

### npm

```shell
npm i dropzone
```

## Scroll Out

**ScrollOut** is a javascript library that detects changes in scroll for reveal, parallax, and CSS Variable effects.

+ [github](https://github.com/scroll-out/scroll-out)
+ [docs](https://scroll-out.github.io/guide.html)
+ [demo](https://codepen.io/collection/npPbNM/)
+ [tutorial](https://www.youtube.com/watch?v=m-MpXGFKomE)

### cdn

```html
<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
```

### npm

```shell
npm i scroll-out
```

## Three.js

**Three.js**: is a powerful javascript library that helps you to create 3D computer graphics.

+ [docs](https://threejs.org/docs/)
+ [demo](https://threejs.org/examples/#webgl_animation_cloth)
+ [github](https://github.com/mrdoob/three.js/)
+ [tutorial](https://www.youtube.com/watch?v=pUgWfqWZWmM&t=59s)

### cdn

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

### npm

```shell
npm i three
```

## leaflet

**leaflet**: is an open-source JavaScript library for mobile-friendly interactive maps.

+ [github](https://github.com/Leaflet/Leaflet)
+ [docs](https://leafletjs.com/reference-1.7.1.html)
+ [demo](https://leafletjs.com/)
+ [tutorial](https://www.youtube.com/watch?v=ls_Eue1xUtY)

### cdn

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

### npm

```shell
npm i leaflet
```

## Suggested Posts

+ [Youtube Courses, Projects To Master Javascript](https://dev.to/ayabouchiha/youtube-courses-projects-to-master-javascript-3lhc)
+ [Your Essential Guide To Map Built-in Object In Javascript](https://dev.to/ayabouchiha/the-essential-guide-to-map-built-in-object-in-javascript-17d2)
+ [All JS String Methods In One Post!](https://dev.to/ayabouchiha/all-js-string-methods-in-one-post-4h23)


To Contact Me:

+ email: developer.aya.b@gmail.com
+ telegram: [Aya Bouchiha](https://t.me/AyaBouchiha)

Happy codding!