5

10 Of The Most Amazing JS Libraries That Almost You Will Enjoy Using Them In You...

 2 years ago
source link: https://dev.to/ayabouchiha/10-of-the-most-amazing-js-libraries-that-almost-you-will-enjoy-using-them-in-your-project-3amo
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.

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

Anime.js

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

<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 modeExit fullscreen mode
npm i animejs
Enter fullscreen modeExit fullscreen mode

D3.js

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

<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 modeExit fullscreen mode
npm i d3
Enter fullscreen modeExit fullscreen mode

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

  • github

  • docs

  • demo

  • tutorial

<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 modeExit fullscreen mode
npm i gsap
Enter fullscreen modeExit fullscreen mode

vivus.js

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

<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 modeExit fullscreen mode
npm i vivus
Enter fullscreen modeExit fullscreen mode

TypeIt.js

TypeIt: is a JavaScript tool for creating typewriter effects.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typeit.min.js"></script>
Enter fullscreen modeExit fullscreen mode
npm i typeit
Enter fullscreen modeExit 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.

<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 modeExit fullscreen mode
npm i dropzone
Enter fullscreen modeExit fullscreen mode

Scroll Out

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

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

Three.js

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

<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 modeExit fullscreen mode
npm i three
Enter fullscreen modeExit fullscreen mode

leaflet

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

<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 modeExit fullscreen mode
npm i leaflet
Enter fullscreen modeExit fullscreen mode

Suggested Posts

To Contact Me:

Happy codding!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK