Mo.js - Una biblioteca completa de Motion Graphics para la Web

La animación en la web está aquí para quedarse como JavaScript solo se está volviendo más poderoso y el soporte del navegador está creciendo con cada año que pasa.

La mayoría de las animaciones con las que estamos familiarizados se centran en la interfaz: los menús desplegables, los botones con pestañas y las presentaciones de diapositivas son ejemplos comunes.

Pero Mo.js es diferente. Esto es un Biblioteca de JavaScript hecha para gráficos en movimiento personalizados para ayudar a los diseñadores a crear increíbles funciones animadas que van más allá de los simples trucos UI / UX.

Si visitas la página de inicio de Mo.js encontrarás el documentación completa Junto con un gran tutorial para principiantes..

Nota esto La biblioteca es bastante difícil de trabajar. Debería estar familiarizado con la codificación del frontend básico antes de jugar con Mo.js por su cuenta. Sin embargo, hay muchas cosas que puede obtener simplemente estudiando las demostraciones en vivo y profundizando en algunos de los códigos fuente..

Eche un vistazo al repo principal de GitHub si quiere ver algunas demos en acción.

Hay una lista completa de enlaces de CodePen con demostraciones en vivo de Mo.js. Éstos incluyen cargadores de animación de página de pantalla completa, microinteracciones clic para animar, y toneladas de manipulaciones de formas..

Por ejemplo, este lápiz crea una microinteracción bastante loca desde la entrada del usuario (solo haga clic en cualquier lugar dentro del lápiz para verlo).

Algunas de estas plumas pueden sentirse por encima pero no son solo animaciones de JS. Son como obras de arte..

Estas demostraciones prueban hasta qué punto hemos llegado Con animación en la web. El hecho de que cualquiera pueda crear estos efectos utilizando solo el código de interfaz es simplemente increíble.

Si desea ver más de Mo.js, eche un vistazo a las demostraciones en GitHub. Es posible que también te guste este tutorial que enseña cómo trabajar con la biblioteca Mo.js paso a paso.

De cualquier manera, esto es una de mis bibliotecas de animación favoritas hasta la fecha. Ofrece tanto control que no puedes encontrarlo en ningún otro lugar. Y está ayudando a traer microinteracciones de aplicaciones móviles al diseño web..