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.
In this article we talked about what AJAX calls are and how to use them in a traditional way, by using the XMLHttpRequest (XHR) object. In short, thanks to AJAX…
Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…
Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…
In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…
Npm and yarn are package managers that help to manage a project’s dependencies. A dependency is, as it sounds, something that a project depends on, a piece of code that…