DEV Community

Cover image for 30 Javascript animation libraries for 2022
GeekTech
GeekTech

Posted on

30 Javascript animation libraries for 2022

Howdy Geeks! πŸ‘‹

Animation makes us be able to tell stories and communicate emotions and ideas in a unique way. Here are 30 JavaScript animation libraries to use in your projects today.

1. Greensock

A JavaScript library for building high-performance animations that work in every major browser

2. VelocityJS

Velocity is a lightweight animation engine with the same API as jQuery's $.animate()

3. Lax.js

Simple & lightweight vanilla javascript plugin to create smooth & beautiful animations when you scroll!

4. Rellax.js

A buttery smooth, super lightweight, vanilla javascript parallax library

5. three.js

An easy to use, lightweight, 3D library with a default WebGL renderer.

6. wow.js

Reveal Animations When You Scroll.

7. Chocolat.js

Free lightbox plugin.

8. Animate on Scroll

Animate on scroll library to reveal animations when You scroll.

9. TiltJS

A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.

10. Rough Notation

Rough Notation is a small JavaScript library to create and animate annotations on a web page

11. tsParticles

A lightweight library for creating particles, an improved version of the abandoned and obsolete particles.js

12. Particles.js

A lightweight JavaScript library for creating particles

13. mo.js

The motion graphics toolbelt for the web

14. Lightbox2

A small JS library to overlay images on top of the current page.

15. Slick

Fully responsive carousel

16. Barba.js

Create fluid and smooth transitions between your website’s pages.

17. Locomotive Scroll

A simple scroll library that provides detection of elements in viewport & smooth scrolling with parallax.

18. Owl Carousel

Free responsive jQuery carousel

19. SwiperJS

Free, Open Source, Modern Slider without jQuery. Available for Vanilla JS and all modern frameworks like React, Vue, Angular etc.

20. Splide

Free, pure JS library for carousels and sliders

21. Simple Parallax

The easiest way to get a parallax effect with javascript

22. Kute.js

KUTE.js is a JavaScript animation engine for modern browsers.

23. Granim.js

Create fluid and interactive gradient animations with this small javascript library.

24. Popmotion

Simple animation libraries for delightful user interfaces.

25. Vivus

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.

26. Typed.js

A JavaScript Typing Animation Library.

27. Progress Bar JS

Responsive and slick progress bars with animated SVG paths.

28. AnimeJS

Lightweight JavaScript animation library with a simple, yet powerful API.

29. AniJS

A Library to Raise your Web Design without Coding

30. Remotion

This is not an animation library per se but you can use this to make videos by writing Javascript code.

Thank you for reading!

Follow us on Twitter for more tech blogs.

Until next time,
Abhiraj

Top comments (1)

Collapse
 
kanishkkhurana profile image
Kanishk Khurana

Just what i needed for my personal website ! thank you so much !