{"id":29677,"date":"2017-04-10T20:01:08","date_gmt":"2017-04-10T12:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29677"},"modified":"2019-04-11T21:34:09","modified_gmt":"2019-04-11T13:34:09","slug":"anime-js-animation-library","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/anime-js-animation-library\/","title":{"rendered":"Anime.js – A Lightweight JavaScript Animation Library"},"content":{"rendered":"

Web animation<\/strong> has come a long way. Not only can developers make any animation using a combo of CSS\/SVG\/JS, but there are dozens of free libraries<\/strong> to save time in the process.<\/p>\n

One of my favorites is Anime.js<\/a><\/strong>, a completely free, open source JavaScript animation library<\/strong>.<\/p>\n

This library can do it all<\/strong>. It\u2019s built on JavaScript<\/strong> but it also relies heavily on CSS animations<\/a><\/strong>. You can target individual page elements via the DOM<\/strong> or you can even target custom SVGs<\/strong>.<\/p>\n

Read Also:<\/strong> 8 JavaScript Libraries to Animate SVG<\/a><\/p>\n

All the documentation is self-hosted on GitHub<\/a><\/strong>, so you may need to scroll to find exactly what you\u2019re looking for. But each animation feature comes with a few parameters<\/strong> such as delay, duration, and easing.<\/p>\n

Note this library doesn\u2019t come<\/strong> with many default animation styles. Anime.js is made for developers<\/strong> who want to customize their animations without writing verbose code<\/strong>.<\/p>\n

For a live example<\/strong>, check out the Codepen pen below<\/a>. The code is exceedingly simple<\/strong> but you get a believable animation with squash & stretch<\/strong> plus anticipation<\/strong>, both fundamentals of animation.<\/p>\n