DEV Community

Cover image for 8 JavaScript Animation Libraries You should "MUST TRY"

8 JavaScript Animation Libraries You should "MUST TRY"

Subhampreet Mohanty πŸ‘¨β€πŸ’» on February 09, 2021

If you're looking to grab your website visitor's attention, what can be better than animations. You know, the first moments to hold the user's fee...
Collapse
 
marcianosr profile image
Marciano Schildmeijer

Was waiting for hxh.js :D

Collapse
 
subhampreet profile image
Subhampreet Mohanty πŸ‘¨β€πŸ’»

Even am waiting for the Same "hxh.js" !!!

Collapse
 
leandroruel profile image
Leandro RR

damn i was waiting the same =/

Collapse
 
vbarzana profile image
Victor A. Barzana

What's that? never heard of it! Could you please share a link?

Collapse
 
hoangdovan profile image
Hoang Do Van

Hunter x Hunter. It's a japanese anime.

Collapse
 
gab profile image
Gabriel MagalhΓ£es dos Santos

Just a quick information: Three.js is not a animation library

Your propose is a better way to manipulate 3D in web. Write pure webgl is not ease, Three.js turn this a ton easer :)

For example, you can use GSAP, or Popmotion to animate 3D elements of Three.js

Collapse
 
subhampreet profile image
Subhampreet Mohanty πŸ‘¨β€πŸ’»

Thanks for the Info. I totally agree with you on this.

Collapse
 
okikio profile image
Okiki Ojo • Edited

I'd suggest checking out my web animation library as well, it's a lightweight Web Animation library that acts as a light wrapper on the Web Animation API.

npmjs.com/package/@okikio/animate

Also, is anyone else hoping they continue Hunter x Hunter.

Collapse
 
vasco3 profile image
JC

I would add React Spring

Collapse
 
davidbwaters profile image
David Waters

Spring compares to Framer motion which uses popmotion under hood, just fyi

Collapse
 
subhampreet profile image
Subhampreet Mohanty πŸ‘¨β€πŸ’»

I would definitely add it in my next blog... it's just awesome ❄

Collapse
 
bevilaquabruno profile image
Bruno Fernando Bevilaqua

Howler.js is very good, awesome recommedations, i will try the others now.

Btw, the "introduction" img, can you disponibilize for us?

Collapse
 
subhampreet profile image
Subhampreet Mohanty πŸ‘¨β€πŸ’»

Thanks for your comment!!!
I hope you find the libraries quite useful and engaging🌟
Introduction Image URL: cdn.mos.cms.futurecdn.net/EzgdmaCQ...

Collapse
 
bevilaquabruno profile image
Bruno Fernando Bevilaqua

Thank you!

Collapse
 
aarmstrongplott profile image
Ashley Armstrong

Lottie is excellent, though you'd need JSON animations; lottiefiles.com/

Collapse
 
subhampreet profile image
Subhampreet Mohanty πŸ‘¨β€πŸ’»

Sure! I will check that out!!!

Collapse
 
perpetual_education profile image
perpetual . education

GREEN SOCK!

If you're going to go deep into something and learn the api - and basically write action script like Flash --- then might as well focus on the best one.

Collapse
 
subhampreet profile image
Subhampreet Mohanty πŸ‘¨β€πŸ’»

I totally agree with that!

Collapse
 
okikio profile image
Okiki Ojo

Might I also suggest @okikio/animate, it uses the Web Animation API to create butter smooth animations. You can read the CSS-Tricks article about it css-tricks.com/how-i-used-the-waap...

Collapse
 
thomashighbaugh profile image
Thomas Leon Highbaugh

Awesome overview, informative and not overdone. Thanks for sharing!

Collapse
 
levirs565 profile image
Levi Rizki Saputra

Good post

Collapse
 
subhampreet profile image
Subhampreet Mohanty πŸ‘¨β€πŸ’»

Thanks a ton!!!

Collapse
 
ronaldohoch profile image
Ronaldo Hoch

mo.js surprized me! πŸ‘

Collapse
 
subhampreet profile image
Subhampreet Mohanty πŸ‘¨β€πŸ’»

Yeaahhh!!! It surprised me as well!!!

Collapse
 
hafijurrahman1 profile image
hafijur-rahman1

thanks a lot for your information