- 2018-06-09 08:21 AM
After some research, I’ve gathered 11 of the finest libraries around to use in your app. I’ve also added a few more, mostly unmaintained, useful libraries.
When working with UI components, you can also use Bit to easily share these components between different apps instead of copy-pasting them, make changes from different projects and collaborate with your others.
Using Pure CSS
Before diving into these libraries, let’s not forget about using pure CSS. Why? because it’s standard, it can improve performance (GPU), provide backward and forward compatibility, and it just might be the most effective way to create animations. Here are 10 examples of neat pure CSS animations.
Pure CSS Saturn Hula Hooping
At over 43K stars, this popular library is a great way to create 3D animations on the browser, using WebGL in an intuitive way. Providing
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.
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.
7. GreenSock JS
With 15K stars and zero dependencies, this library provides easy scroll animations for web and mobile browsers, to reveal things on-scroll in an animated way. It supports multiple neat types of effects, and even lets you define animations using natural language. Here’s a short SitePoint tutorial.
9. Hover (CSS)
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.