Top 10 de librerías de animación para web en 2017

Top 10 de librerías de animación para web en 2017

La web actual está llena de cosas increíbles que capturan la atención de los usuarios. Hoy en día, en el desarrollo web se utiliza una amplia gama de técnicas para atraer, entretener, informar y finalmente dirigir a los visitantes hacia sus sitios web. Una de esas formas para lograrlo es a través de la animación.

Hace poco más de 16 años, normalmente se necesitaba del uso de algún plugin para lograr esto, como el uso de la tecnología de Flash que durante más de una década fue el estandar para añadir interactividad a los sitios web, pero que en los últimos 5 años con el rápido desarrollo de HTML5, CSS3 y varias librerías de JavaScript, hoy ya no es necesario la utilización de un plugin de tercero para lograr esto.

Actualmente hay una amplia selección de librerías de animación gratuitas disponibles y otras de pago que por su facilidad de uso, características y su popularidad general, valen la pena compartirlas para que los desarrolladores o diseñadores puedan utilizarlas.

Animate.css

Animate.css es una de las librerías de animación CSS más elegantes y más fáciles de usar que hay. Es tan simple de usar que solo basta con añadir las clases CSS necesarias en los elementos de HTML. También se puede utilizar jQuery para llamar a las animaciones en algún evento en particular.

Animación html5 con Animate
  • Creador: Daniel Eden
  • Fecha de liberación: 2013
  • Versión actual: 3.5.2
  • Popularidad: 44,000+ en GitHub
  • Descripción: "Una biblioteca multi-navegador de animaciones CSS. Tan fácil de usar como cualquier otra cosa."
  • Tamaño de la librería: 55.2 kB
  • GitHub: https://github.com/daneden/animate.css
  • Tipo de Licencia: MIT

Animate.css es una de las librerías de animación CSS más popular y ampliamente utilizado. Su versión simplificada (min.css) también es suficientemente pequeña como para su inclusión en los sitios web móviles.


Bounce.js

Bounce.js es una herramienta y librería de Javascript que se centra en proporcionar una selección de animaciones CSS hinchables único a su sitio web.

Animación html5 con Bounce
  • Creador: Tictail
  • Fecha de liberación: 2014
  • Versión actual: 0.8.2
  • Popularidad: 5,100+ en GitHub
  • Descripción: "Crea hermosas animaciones CSS3 en cualquier momento momento."
  • Tamaño de la librería: 16 kB
  • GitHub: https://github.com/tictail/bounce.js
  • Tipo de Licencia: MIT

GSAP

GSAP es un conjunto de herramientas de secuencias de comandos, de alto rendimiento y animaciones HTML5 que trabajan en todos los principales navegadores. Ninguna otra librería proporciona una secuencia tan avanzada, la eficiencia de la API, y un control estricto. Incluye:

  • Tweenlite que es el núcleo del motor que maneja animación de casi cualquier característica en cualquier objeto. Es relativamente ligero pero con todas las funciones. Se puede ampliar al uso de plugins opcionales.
  • TweenMax sería el hermano mayor de TweenLite. Hace todo lo que TweenLite hace pero además hace otro tipo de animación no esencial como repetición, yoyo, repeatDelay, etc. Incluye muchos plugins comunes dentro de su motor como el CSSPlugin de manera que no es necesario cargar tantos archivos externos adicionales. La atención se centra en tener la mayor capacidad de funcionalidad en lugar detener un peso ligero.
  • TimelineLite es una herramienta de sequencia de gran alcance, de peso ligero que actúa como un contenedor para transiciones (tweens), lo que facilita el control de ellos en su conjunto y, precisamente, a manejar su tiempo en relación el uno del otro. Incluso se puede anidar estos contenedores dentro de otras líneas de tiempo tanto como usted lo requiera. Esto le permite modularizar el flujo de trabajo de la animación con facilidad.
  • TimeLineMaxes la continuación de TimelineLite,y ofrece exactamente la misma funcionalidad más otras funcionalidades avanzadas como repetición, retraso de la repetición, yoyo, currentLabel(), etc.
Animación html5 con GSAP

Magic Animations

Magic Animations es una de las librerías de animación más impresionantes disponibles. Tiene muchas animaciones diferentes, muchos de los cuales son bastante únicas. Al igual que con Animate.css, se puede implementar simplemente importando el archivo CSS. También puede hacer uso de las animaciones de jQuery.

Animación html5 con Magic Animations
  • Creador: Christian Pucci
  • Fecha de liberación: 2014
  • Versión actual: 1.2.0
  • Popularidad: 5,000+ en GitHub
  • Descripción: "Animaciones CSS3 con efectos especiales"
  • Tamaño de la librería: 36.5 kB
  • GitHub: https://github.com/miniMAC/magic

Se ha convertido famosa por su estilo muy peculiar que tiene efectos variados (de magia, creativos y de bomba).

Si se está buscando algo un poco fuera de lo común, vale la pena intentar con esta librería.


DynCSS

DynCSS es el tipo de librería de animación que usa un efecto de paralaje.

Animación html5 con DynCSS

DynCSS es una librería que podría crecer en popularidad en el futuro cercano, pero en la actualidad es un proyecto muy reciente. Una de las características interesantes que ofrece es la rotación de los elementos con respecto al desplazamiento.


CSShake

CSShake es una librería CSS para sacudir los elementos de su página web. Existen una serie de variaciones disponibles para sacudir sus componentes web.

Animación html5 con CSShake
  • Creador: Lionel
  • Fecha de liberación: 2014
  • Popularidad: 3,300+ en GitHub
  • Versión actual: 1.5.2
  • Descripción: "¡Clases CSS para mover el DOM!"
  • Tamaño de la librería: 78.8 kB
  • GitHub: https://github.com/elrumordelaluz/csshake
  • Licencia: MIT

Personalmente, aunque actualmente esta librería es más popular que DynCSS, el tamaño del archivo es mucho mayor para la funcionalidad que se añade. Mientras que las animaciones son buenas, se requeriría de una segunda librería de animación para poder complementar bien un proyecto.


Spin Kit

Spin Kit es una librería CSS ideal para aquellos que quieran lograr animaciones en cargadores animados (preloaders).

Animación html5 con Spin Kit
  • Creador: Tobias Ahlin
  • Fecha de liberación: 2014
  • Popularidad: 13,600+ en GitHub
  • Versión actual: 1.2.5
  • Descripción: "Una colección de indicadores de carga animados con CSS"
  • Tamaño de la librería: 23 kB
  • GitHub: https://github.com/tobiasahlin/SpinKit
  • Licencia: MIT

Esta colección es bastante buena cuando se busca lograr transiciones animadas en cargadores. En vez de utilizar un gif animado, esta puede ser una mejor opción.


Single Element CSS Spinners

Single Element CSS Spinners es una librería CSS que también es ideal para los que quieran lograr animaciones en cargadores animados (preloaders).

Animación html5 con Single Element CSS Spinners
  • Creador: Luke Haas
  • Fecha de liberación: 2014
  • Popularidad: 5,000+ en GitHub
  • Versión actual: 1.0.0
  • Descripción: "Una colección de precargadores animados con CSS"
  • Tamaño de la librería: 23 kB
  • GitHub: https://github.com/lukehaas/css-loaders
  • Licencia: MIT

Esta colección junto con la colección anterior de Spin Kit, son excelentes opciones para darle vida a los cargadores en HTML5.


AniJS

AniJS es una librería de Javascript que te da la posibilidad de añadir animaciones CSS3 a tus diseños, para construir interfaces de usuario sofisticados como fichas animadas, acordeones, modales, menús deslizantes, notificaciones de aplicaciones móviles, desplazamientos, y muchos más.

Animación html5 con AniJS
  • Creador: Dariel Noel
  • Fecha de liberación: 2014
  • Popularidad: 3,100+ en GitHub
  • Versión actual: 0.9.3
  • Descripción: "¡Una biblioteca para alcanzar tu diseño web sin codificar!"
  • Tamaño de la librería: 7.7 kB (gzip)
  • GitHub: https://github.com/anijs/anijs/
  • Licencia: MIT

Esta colección es fácil de usar, además de ser muy compacta (7.7 kB después de gzipping), no se tiene que integrar con bibliotecas de terceros además de que existe una buena forma de integrar a programadores y diseñadores.


Anime

Anime es una biblioteca ligera de animación hecha en JavaScript. Funciona con cualquier Propiedad de CSS, transformaciones CSS individuales, SVG o cualquier atributo DOM, y Objetos JavaScript.

Animación html5 con Anime

Anime es una de las más recientes librerías. Fue creada en 2016 pero ha ganado mucha popularidad desde los primeros meses desde su creación por las maravillas que se puede hacer con esta librería pero creo que es demasiado para una rápida y fácil implementación de un sitio web estándar. Habrá que probar Anime y ver qué tan complejo es implementar todas sus características en un sitio web en producción.


Conclusión

¿Qué biblioteca o librería debería de elegir? la respuesta es algo compleja. Las librerías mencionadas son solo algunos de las que considero como las mejores aunque deben haber muchas más de gran calidad. Siempre habrán bibliotecas de animación listas y esperando para ser implementadas en los proyectos. Los enumerados previamente son algunos con la mejor combinación de sofisticación y estabilidad. Si se está buscando una solución de CSS robusta y fácil de usar, Animate CSS es probablemente la opción más versátil, pero si se quiere experimentar con algo realmente novedoso y diferente ¿por qué no tratar con Anime (JS)?
Al final, todo depende un poco del tiempo que se tenga para elaborar un proyecto y del alcance del mismo... ¿Ustedes tienen alguna librería de CSS o Javascript favorita? compartan su experiencia con nosotros.

¿Qué es SEO On-Page y SEO Off-Page?
¿Qué hay que considerar para crear un sitio web?

Artículos relacionados

 

Clientes / Proyectos

  • Simonela
  • Otoniel Solis
  • Daniela Tapia
  • Norris & Elliott
  • Faficom
  • Master Payment
  • Celeris
  • Evenflo
  • LTEC
  • Ben 3D
  • Club Rotario Aragón
  • Civflex
  • Somos Chanekes
  • Quantum IP
  • Diffruta
  • KidZania
  • Safekids Mexico
  • Raamy
  • Napperz
  • Gamyr
  • Rotary Distrito 4170
  • Ola Verde MX
  • Estylosa
  • Avenida Conkal
  • Policlínica New Dimensions
  • Highkey
  • Ifonly México
  • Tarjeta Médica Pop
  • Casa de Proyectos
  • Montessori Nan
  • Universidad Motolinía
  • Club Campestre Saltillo
  • Hagamos La Vaca
  • Tarjeta Médica Pop
  • Hand Relax
  • Armonía Decora