DEV Community

Cover image for 10 Of The Most Amazing JS Libraries That Almost You Will Enjoy Using Them In Your Project!
Aya Bouchiha
Aya Bouchiha

Posted on • Updated on

10 Of The Most Amazing JS Libraries That Almost You Will Enjoy Using Them In Your Project!

Hello everybody, I'm Aya Bouchiha, 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.

cdn

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i chart.js
Enter fullscreen mode Exit fullscreen mode

Anime.js

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

cdn

<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>
Enter fullscreen mode Exit fullscreen mode

npm

npm i animejs
Enter fullscreen mode Exit fullscreen mode

D3.js

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

cdn

<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>
Enter fullscreen mode Exit fullscreen mode

npm

npm i d3
Enter fullscreen mode Exit fullscreen mode

GSAP

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

  • github

  • docs

  • demo

  • tutorial

cdn

<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>
Enter fullscreen mode Exit fullscreen mode

npm

npm i gsap
Enter fullscreen mode Exit fullscreen mode

vivus.js

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

cdn

<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>
Enter fullscreen mode Exit fullscreen mode

npm

npm i vivus
Enter fullscreen mode Exit fullscreen mode

TypeIt.js

TypeIt: is a JavaScript tool for creating typewriter effects.

cdn

<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i typeit
Enter fullscreen mode Exit fullscreen mode

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.

cdn

<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>
Enter fullscreen mode Exit fullscreen mode

npm

npm i dropzone
Enter fullscreen mode Exit fullscreen mode

Scroll Out

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

cdn

<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i scroll-out
Enter fullscreen mode Exit fullscreen mode

Three.js

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

cdn

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

npm

npm i three
Enter fullscreen mode Exit fullscreen mode

leaflet

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

cdn

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

npm

npm i leaflet
Enter fullscreen mode Exit fullscreen mode

Suggested Posts

To Contact Me:

Happy codding!

Discussion (5)

Collapse
vagrantjin profile image
Vagrant Jin Kazama

swiperjs also has an excellent API.

isotope.js/isotope-packery for filtering and masonary "packing" grid layouts.

big shout for scrollOut.

Collapse
prabhjotsinghchadha profile image
Prabhjot Singh Chadha

Three js is my favourite too..

Collapse
ayabouchiha profile image
Aya Bouchiha Author

Three.js is an incredible library!

Collapse
alexmacarthur profile image
Alex MacArthur

Thanks for putting TypeIt on here (I made it)!

Collapse
ayabouchiha profile image
Aya Bouchiha Author

Oh!!! Niceeee, You're amazing!