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 • Edited on

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

#javascript #typescript #webdev #tutorial

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!

Top comments (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 •

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 •

Oh!!! Niceeee, You're amazing!

Read next

steve8708 profile image

Turn a Figma Dropdown Design Into Working React Code in 1 Minute

Steve Sewell -

michael_flanagan_red profile image

Building the Backbone: Entities Part 2, Agent

Michael Flanagan -

tools-ai profile image

Top 5 Free Static Website Hosting Platforms I Love

Jenny C -

techcreator_usa profile image

How does WebAssembly enhance web application performance?

Techcreator USA -