Some Animation Libraries for front-end developers

post

Picture Source : https://tutorialzine.com/2017/05/getting-started-with-the-javascript-web-animation-api

Front-end web design has been through a revolution in the last decade. In the late naughties, most of us were still designing static magazine layouts. Nowadays, we’re building “digital machines” with thousands of resizing, coordinated, moving parts.

While browsing the web looking for a neat Javascript animation library, I’ve found that many of the “recommended” ones were not maintained for a while.

1. Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

AnimeJS

At over 30K stars, Anime is a JavaScript animation library that works with CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. This library lets you chain multiple animation properties, synchronize multiple instances together, create timelines and more.

 

2. Animate.css

Animate.css

Animate.css is one of the smallest and most easy-to-use CSS animation libraries available. Applying the Animate library to your project is as simple as linking the CSS and adding the required CSS classes to your HTML elements. You can also use jQuery to trigger the animations on a particular event if you prefer.

 

3. Bounce.js

BounceJS

Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations.

 

4. CSShake

CSShake

CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page. As you might expect, there are a quite a number of variations available for shaking your web components.

 

5. Scroll Reveal

Scroll Reveal

ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.

 

6. Hover.css

HoverCSS

Well, this is a CSS library. At 20K stars, Hover provides acollection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and more, available in CSS, Sass, and LESS. You can copy and paste the effect you’d like to use in your own stylesheet or reference the stylesheet.

 

7. Kute.js

Kute.js

KUTE.js is crazy fast with it's outstanding performance and super fast code execution, it's also memory efficient. I made a cool demo to showcase how KUTE.js really scales on performance.

KUTE.js covers all modern browsers with fallback options for legacy browsers. When using polyfills and the right browser detection you can manage all kinds of fallback animations for legacy browsers.

 

8. Typed.js

Typed.js

This 7K stars library basically lets you create typing animations for strings at selected speeds. You can also place an HTML div on the page and read from it to allow access for search engines and users with JavaScript disabled. Used by Slack and others, this library is both popular and surprisingly useful.

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

 

9. GreenSock JS

GreenSock

GSAP is a JavaScript library for creating high-performance, zero dependencies, cross-browser animations which claims to be used in over 4 million websites. GSAP is flexible and works with React, Vue, Angular and vanilla JS. GSDevtools can also help dubug animations built using GSAP.

 

10. Vivus

Vivus

At over 11K stars, Vivus is a zero-dependencies JavaScript class that lets you animate SVGs, giving them the appearance of being drawn. You can use one of many available animations, or create custom script to draw you SVG. Check out Vivus-instant to get a live example, hands-on.

 

11. Popmotion

Popmotion

At 14K stars, this functional and reactive animation library weighs only 11kb. It allows developers to create animations and interactions from actions, which are streams of values that can be started and stopped, and created with CSS, SVG, React, three.js and any API that accepts a number as an input.

 

12. Velocity

Velocity

Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

 

13. Three.js

Three.js

At over 50K stars, this popular library is a great way to create 3D animations on the browser, using WebGL in an intuitive way. Providing <canvas>, <svg>, CSS3D and WebGL renderers, this library lets us create rich interactive experiences across devices and browsers. First introduced at April 2010, the library is still being developed by nearly 1,000 contributors.

 

14. Mo.js

MoJS

At 14K stars, this library is a motion graphics toolbelt for the web, with simple declarative APIs, cross-device compatibility and over 1500 unit-tests. You can move things around the DOME or SVG DOME or create unique mo.js objects. Although documentation is somewhat scarce, examples are plentiful and here’s an introduction at CSS tricks.

 

15. Magic Animations

Magic Animations

Magic Animations has been one impressive animation libraries available. It has many different animations, many of which are quite unique to this library. As with Animate.css, you can implement Magic by simply importing the CSS file. You can also make use of the animations from jQuery. This project offers a particularly cool demo application.

 

16. DynCSS

DynCSS

DynCSS is an animation library that you might like to use in your website along with parallax effects. To get a clearer idea of what you can do with this library, take a look at this demo.

 

17. AniJS

AniJS

Our final library is interesting for its unique approach. AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ struture. Take the following format:

If click, On Square, Do wobble animated To .container-box

 

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

If you don’t have a long familiarity with JavaScript, this may well be a great way to step into JS-choreographed movements.

Thanks for reading :)