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>
npm
npm i chart.js
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>
npm
npm i animejs
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>
npm
npm i d3
GSAP
GSAP is one of the most famous libraries that animates anything JavaScript can touch, such as CSS properties and SVG.
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>
npm
npm i gsap
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>
npm
npm i vivus
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>
npm
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.
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>
npm
npm i dropzone
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>
npm
npm i scroll-out
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>
npm
npm i three
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>
npm
npm i leaflet
Suggested Posts
- Youtube Courses, Projects To Master Javascript
- Your Essential Guide To Map Built-in Object In Javascript
- All JS String Methods In One Post!
To Contact Me:
- email: developer.aya.b@gmail.com
- telegram: Aya Bouchiha
Happy codding!
Top comments (5)
swiperjs also has an excellent API.
isotope.js/isotope-packery for filtering and masonary "packing" grid layouts.
big shout for scrollOut.
Three js is my favourite too..
Three.js is an incredible library!
Thanks for putting TypeIt on here (I made it)!
Oh!!! Niceeee, You're amazing!