Well - designed and smooth animations are one of the most important things that makes an app stand out from the crowd. The purpose of UI animations is to help users understand the product in a more interactive way.
This popular library with over 43 K stars is a great way to create 3D animations on the browser by intuitively using WebGL. This library allows us to create rich interactive experiences across devices and browsers by providing < canvas >, < svg >, CSS3D and WebGL renderers. The library was first introduced in April 2010, and nearly 1,000 contributors are still developing it.
This library is a motion graphics toolbelt for the web at 14 K stars, with simple declarative APIs, cross-device compatibility and more than 1500 unit tests. You can move or create unique mo.js objects around the DOME or SVG DOME. Although documentation is somewhat scarce, there are many examples and an introduction to CSS tricks.
This functional and reactive library of animation weighs only 11 kb at 14 K stars. It allows developers to create animations and interactions from actions that are value streams that can be started and stopped and created using CSS, SVG, React, three.js and any API that accepts a number as an input.
7. GreenSock JS
This library provides easy scroll animations for web and mobile browsers with 15 K stars and zero dependencies to reveal things on scroll in an animated manner. It supports several clean types of effects and can even define animations using natural language.
9. Hover (CSS)
Well, it's a library of CSS. At 20 K stars, Hover offers a collection of CSS3-powered hover effects available in CSS, Sass and LESS for links, buttons, logos, SVG, images and more. The effect you want to use in your own stylesheet or reference the stylesheet can be copied and pasted.
Also check out: iTyped
The lightweight library for manipulating and animating SVG. SVG.js has no dependencies and aims to be as small as possible while providing close to complete coverage of the SVG spec.
14. Ant Motion
Ant Motion is a motion design specification from Ant Design, and also provide a complete solution with lots of out-of-box animations for your React applications.
What can Ant Motion do?
- Create neat animations by using React components with a simple configuration.
- Create beautiful landing page with motions by a few steps.
Before diving into these libraries, don't forget about using pure CSS!
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.
When you access any element of the DOM, it is usual to save it in a variable. This is something that at first might seem very simple, but if you…
In this tutorial we are going to see how you can change the order of the elements of an array so that they are inverted. You could use a loop…
In case you have two divs of different sizes you may sometimes want to scroll both at the same time but at different speeds depending on their size. For example,…