75 herramientas de animación web que debes probar
La animación es una de esas tendencias que tiene sus garras en las interfaces web. Su popularidad fluctúa, pero siempre está ahí en alguna parte, como un componente esencial en cualquier sitio web.
Desde diminutos, apenas visibles, cargando spinners, hasta transiciones de páginas enteras como una experiencia cinematográfica, la animación llega a cada área de nuestros diseños
Para los diseñadores que buscan incorporar animación, hay una gran cantidad de opciones disponibles. Desde transiciones puramente decorativas que simplemente embellecen las interfaces hasta efectos significativos que mejoran las experiencias del usuario, nuestra colección abarca herramientas que le permiten crear animaciones de diversas escalas y para diferentes propósitos. Aquí hay 75 complementos y bibliotecas que deseará consultar; no los usará todos en todas las ocasiones, pero cada uno tiene un caso de uso ideal, y algunos los usará una y otra vez ...
1. Animate.css
Animate.css es una biblioteca fundamental de nítidas animaciones entre navegadores que subyace a muchas soluciones. Desde bouncings y destellos clásicos hasta giros modernos y efectos únicos, es capaz de satisfacer las necesidades de casi cualquier proyecto.
2. Animaciones Mágicas
Animaciones Mágicas se enfoca en efectos excepcionales que le dan a la interfaz un entusiasmo particular. Aunque la biblioteca no puede presumir de una inmensa diversidad, es suficiente para enriquecer la experiencia del usuario.
3. Bounce.js
Bounce.js es un pequeño patio de juegos donde puedes realizar experimentos con animaciones basadas en CSS. Simplemente agregue un componente y ajuste la configuración para que todo funcione. Y al final, exporte el archivo css.
4. AnijS
AnijS ayuda a manejar la animación de una manera intuitiva mediante el uso de instrucciones simples como If, On, Do, To. Lo bueno es que puedes usar tus propias clases o incluso Animate.css (mencionado anteriormente) para crear algo increíble.
5. Snabbt.js
Snabbt.js es famoso por su enfoque minimalista que genera animaciones rápidas. Pesa solo 5kb; sin embargo, puede dar un impulso visible a cualquier componente al traducir, rotar, inclinar, escalar o cambiar el tamaño de su forma.
6. Kute.js
Kute.js es un motor de animación excelente que ofrece un excelente rendimiento. Es rápido y compatible en diferentes navegadores gracias a un conjunto de recursos viables que manejan navegadores heredados. Viene con numerosos complementos para proporcionar un entorno de trabajo eficiente.
7. Velocity.js
Velocity.js es un motor de animación que a primera vista puede parecer poco representativo. Sin embargo, su arsenal incluye todos los tipos de animación habituales, como morphing, loop, easing, scroll, etc. Es rápido e independiente de jQuery.
8. Lazy Line Painter
Las animaciones de ruta SVG son más fáciles con Lazy Line Painter . Tome su ilustración de línea de Illustrator en formato SVG y cárguela en el convertidor. Este último generará un archivo jQuery que maneja el proceso de animación. Si es necesario, puede hacer cambios directamente dentro del código.
9. SVG.js
SVG.js le ofrece un entorno intuitivo donde puede manipular y animar archivos SVG. Es pequeño e independiente con sintaxis limpia y API unificada. Haz lo que quieras: animar tamaño, color, posición, rutas de texto; transformar componentes; enlazar eventos, etc.
10. IU de movimiento
A diferencia de los ejemplos anteriores, IU de movimiento aprovecha la ventaja de SASS para crear intrigantes animaciones CSS. Existe una gran cantidad de transiciones y efectos predefinidos que se pueden aplicar a cualquier componente HTML. Todo funciona en todos los navegadores populares, excepto en IE9.
11. ¡Espera! Animar
¡Espere! Animar le permite operar retrasos y esperas en animaciones de una manera simple. Calcule todos los intervalos de tiempo requeridos a través del panel pequeño y construya una animación natural sin ajetreo y bullicio.
12. Dynamics.js
Dynamics.js es una biblioteca impulsada por JavaScript que ofrece 9 efectos estándar para jugar. Puede especificar la duración, la frecuencia, la fricción, el tamaño de anticipación y la fuerza de anticipación para lograr animaciones basadas en la física de la vida real.
13. Choreographer.js
Con Choreographer.js al alcance de su mano, no debe temer a las animaciones complejas, ya que esta biblioteca de JavaScript hace todo el trabajo pesado. Aunque se trata de una cantidad limitada de animaciones, le permite trabajar con funciones personalizadas para que pueda crear sus propias obras maestras.
14. Anime.js
Llega con un impresionante conjunto de características que permite encadenar múltiples animaciones, sincronizar diferentes instancias, dibujar líneas, transformar objetos, crear animaciones individuales, etc. Motor de animación de JavaScript te sorprenderá con su potencial.
15. Mo.js
Mo.js significa movimiento para la Web. Es increíblemente rápido y al mismo tiempo intuitivo y simple. Cree senderos atractivos, transiciones modales de diálogo inesperadas, diseños de burbujas, animaciones explosivas y mucho más.
16. Sequence.js
Sequence.js es un marco impulsado por CSS para crear animaciones basadas en pasos con capacidad de respuesta táctil. Es ideal para crear controles deslizantes, presentaciones, banners y otros tipos de componentes dinámicos. Entre los varios planes premium, encontrará uno gratuito que le otorga una licencia personal de código abierto.
17. Shifty
Sospechoso es un motor de tweening con un fuerte enfoque en la optimización, el rendimiento rápido, la flexibilidad y la extensibilidad. Se considera una alternativa viable a GreenSock pero con una interfaz mucho más simple.
18. Es martes
martes es una biblioteca de animación independiente que se puede usar en conjunto con otras bibliotecas. Hace que las entradas y salidas se vean suaves, sutiles y elegantes. Ofrece una variedad de efectos estándar tales como fade-ins, expansiones, contracciones, drop-ins, etc.
19. Animación de CSS
Animar CSS es un patio de juegos primitivo que genera un código válido y sin desorden para cualquier animación regular. Establecer nombre, clase, propiedades de animación, propiedades de marco; manipule la línea de tiempo y agregue marcadores: en una palabra, ajuste todo lo que necesita para producir una animación regular basada en fotogramas clave.
20. Vivus.js
Envío con tres tipos de animación: demorar, sincronizar y revelar uno por uno, Vivus.js dibujará un SVG de una manera suave y natural haciendo que la aparición del componente sea una experiencia encantadora. Puede buscar animaciones predefinidas o usar sus propias funciones personalizadas.
21. Bonsai.js
Bonsai.js es una biblioteca de JavaScript para manipulaciones de gráficos avanzados. Tiene un renderizador bastante simple de API y SVG. Utilice su editor en línea para dar una prueba de manejo, familiarizarse con la sintaxis e incluso descargar algunas muestras para comenzar.
22. GSAP por GreenSock
GSAP es una poderosa plataforma de animación dirigida a animaciones profesionales. Tiene numerosos complementos y utilidades que son responsables de varios tipos de animaciones. Consiste en BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, etc.
23. Popmotion
Popmotion es otra alternativa ligera y práctica a Greensock en nuestra colección. Es un motor de movimiento con un control total sobre cada cuadro. Tiene una interpolación avanzada, combinación de colores y un conjunto de funciones y acciones para crear soluciones complejas.
24. Tween.js
Se hace una gran cantidad de cosas increíbles con la ayuda de Tween.js . Es un motor de tweening de vanguardia con numerosos parámetros para tener la animación bajo control. También es una excelente solución para mejorar proyectos impulsados por Three.js.
25. Hover.css
Hover.css La biblioteca se puede dividir en varias categorías básicas: transiciones 2D, transiciones de fondo, animaciones de iconos, transiciones de bordes, transiciones de sombras y resplandores, burbujas de discurso y rizos. Aplique estos efectos a cualquier elemento de su diseño sin restricciones.
26. Tránsito
La lista de características de Tránsito es bastante corto pero incluye las cosas más importantes para construir transformaciones 2D y 3D. Por ejemplo, puede especificar demoras y duraciones, agregar la función de aceleración, usar valores relativos, y más.
27. Cohete
Cohete es una solución para embellecer el movimiento de un objeto de un punto a otro. Hay 8 efectos especiales como la pulsación o la rotación que le dan a este viaje un encanto encantador .
28. Animo.js
Animo.js es una herramienta relativamente pequeña para manejar transiciones y animaciones. Tiene un conjunto de complementos adicionales como cuenta regresiva, rotación y animación que enriquecen la biblioteca y hacen que sea mucho más fácil lograr el efecto deseado.
29. Shift.css
Shift.css es un marco para crear animaciones dentro de un contenedor que afecta tanto a los elementos anidados como a los adaptativos. Hay 15 tipos de animaciones estándar, como mover, entrar, salir, soltar y algunas otras.
30. CSShake
CSShake viene con 11 clases que obligan a los elementos de tu DOM a temblar. Puede elegir la dirección (horizontal o vertical), el tipo (fijo, loco, constante, fragmento), la intensidad (lenta o difícil) o simplemente optar por una opción predeterminada.
31. Azafrán
Si prefiere usar mixins para manipular fácil y rápidamente animaciones y transiciones, entonces Azafrán es ciertamente para ti Es una compilación de métodos reutilizables escritos en Sass donde puede establecer variables y parámetros.
32. CSSynth
CSSynth es un pequeño editor donde puedes disfrutar de la belleza de la sincronización. La animación se basa en un rango de cuadrados cuyo número puede especificar en el panel izquierdo. Seleccione un efecto, establezca la demora y elija si desea descargar el código de resultado en formato CSS o SCSS.
33. Ceaser
Ceaser es una herramienta antigua y probada en el tiempo para realizar experimentos con la clásica animación de relajación. Hay una serie de variantes que comienzan en lineales y terminan en las personalizadas. Dos parámetros adicionales (duración y efecto) ayudarán a perfeccionar el resultado.
34. Morf.js
Para llevar la herramienta mencionada un poco más allá, puedes intentar Morf.js . Ofrece transiciones basadas en funciones de aceleración personalizadas. Hay casi 40 opciones predefinidas que puede adaptar rápidamente a su proyecto.
35. Voxel.css
Voxel.css fue creado específicamente para renderizaciones 3D. Su implementación simple permite incluso a los principiantes obtener la comprensión del CSS 3D. La biblioteca tiene 4 clases importantes: Escena, Mundo, Editor y Voxel que ayudan a construir juegos y disfrutar de la acción.
36. Repaintless.css
Repaintless.css usa la técnica FLIP para hacer que la animación sea rápida y fluida. Aunque requiere algunas mejoras; sin embargo, es un comienzo perfecto para aquellos que prestan una atención especial al rendimiento.
37. MixItUp
Mezclar es una biblioteca para embellecer el filtrado, la clasificación, la inserción y otras acciones predeterminadas inherentes a las interfaces de la mayoría, como carteras, galerías, etc. Es libre de dependencia y promete proporcionar un alto nivel de rendimiento.
38. Wallop
Como dice el título, Golpe es para mostrar y esconder cosas de una manera agradable; predeciblemente, su uso general radica en construir controles deslizantes. Sin embargo, nadie te impide explotar su potencial y crear algo interesante e intrigante.
39. Ramjet
Ramjet transforma un elemento en otro con la ilusión de movimiento que se realiza mediante la función de relajación. Es capaz de trabajar con elementos DOM, SVG, imágenes estáticas o imágenes animadas.
40. jQuery DrawSVG
Basado en un poderoso motor de animación jQuery, atrae eficientemente todos los caminos dentro del SVG, dando a la imagen una entrada dramática y al mismo tiempo elegante. El procedimiento es simple: agregar el complemento a la página, inicialízalo y ejecuta la animación.
41. Animatic.js
Animatic.js es una excelente solución de navegador cruzado con reglas de física integradas que emplea transformaciones CSS, transformaciones 3D y JavaScript para dar vida a todo. Su principal tarea es disminuir sus esfuerzos para animar numerosos objetos a la vez. Puede crear animaciones paralelas y secuenciales ajustando cuidadosamente la duración, la demora y la función de relajación.
42. Move.js
Move.js es una herramienta simplificada para crear animaciones regulares como escalar, sesgar, mover o traducir. Cada animación se puede mejorar con la clásica función de facilidad.
43. Eg.js
Eg.js es una colección cuidadosamente ensamblada de varios efectos y elementos dinámicos que están destinados a mejorar las interacciones en las interfaces. Hay 8 componentes potentes que clasifican tareas básicas y 6 métodos principales y eventos para otros fines.
44. GFX
GFX es una atractiva biblioteca de animación 3D para construir animaciones CSS3 de forma programática. Funciona con jQuery por lo que es mucho más fácil producir el resultado deseado. Puedes jugar escalando, girando, traduciendo, sesgando y otras cosas.
45. Stylie
Aunque se dice que Stylie es una herramienta para divertirse, sin embargo, seguramente te impresionará con sus capacidades. El centro de control cuenta con 4 pestañas que le permiten afinar fotogramas clave, facilitar, exportar opciones y HTML, haciendo que las animaciones complejas sean fáciles de usar.
46. Iconate.js
Iconate.js inyecta vida en las transformaciones de los iconos, mejorando la transición entre dos elementos mediante un agradable efecto acompañante. Funciona muy bien no solo con Font Awesome, sino también con Glyphicons e incluso con su propio conjunto de pictogramas personalizados.
47. AnimateMate
AnimateMate es una pequeña herramienta para producir y exportar animaciones a pequeña escala desde su entorno Sketch. No es algo sofisticado, pero le permite jugar con fotogramas clave, agregar funciones de relajación, secuencias de control y más.
48. CAAT
CAAT (que significa Canvas Advanced Animation Toolkit) es un excelente marco que forma un potente tándem con JavaScript. Su conjunto de herramientas presenta escenas, tecnologías de renderizado múltiple, máscaras de recorte, paquete estándar de comportamientos, etc.
49. Granim.js
Granim.js es una pequeña biblioteca de JavaScript para condimentar las interfaces con centros de mesa interactivos basados en gradientes. Puede ser una animación de degradado radial estándar, degradados dinámicos aplicados sobre el fondo de la imagen o degradados móviles combinados con máscaras de imagen.
50. Animista
Creado por Ana Travas, Animista es un campo de juego para realizar experimentos con un grupo de animaciones convencionales e inusuales, predefinidas y basadas en CSS. Elija la duración, la función de tiempo, el retraso, el recuento de iteraciones y algunas otras opciones para examinar el resultado.
51. Obnoxious.css
Obnoxious.css viene con 5 animaciones únicas basadas en CSS que obligan a los elementos de la interfaz a agitar, girar, ampliar, imitar el efecto estroboscópico o cambiar el peso del tipo de letra. Todo lo que necesita hacer es aplicar la clase preferida al div deseado.
52. Animatelo
Animatelo incluye una tonelada de llamativos efectos dinámicos que fueron tomados prestados del famoso y poderoso Animate.css, proporcionando una forma más fácil de aplicarlos. Gracias al polyfill API de Web Animations, es compatible con todos los navegadores modernos.
53. Foxholder
Foxholder es un paquete de 15 bonitos y pequeños efectos creados específicamente para mejorar las interacciones de los usuarios con el formulario. Cada método enfatiza el campo de entrada a su manera: puede hacer que el borde sea más brillante, agregar pistas visuales, establecer texto en movimiento y mucho más.
54. Rhythm.js
Rhythm.js se trata de pequeñas animaciones lúdicas inspiradas en el disco. Esta biblioteca de JavaScript comprende efectos que imitan algún tipo de movimientos de baile. Hay casi 20 opciones que agregarán boogie-woogie a su sitio web.
55. Colorido.js
Al igual que Granim.js, este plugin accionado por JavaScript fue creado para manipular la propiedad de color. Ayuda a cambiar dinámicamente los tonos y la opacidad del fondo y el texto, así como a crear degradados radiales, lineales, diagonales y horizontales no estáticos.
56. Barba.js
Barba.js aprovecha PJAX (una técnica basada en ajax) para aliviar a los usuarios de la llamada conmutación de actualización dura entre las páginas. Simplemente oculta el contenedor viejo y muestra el nuevo contenedor de una manera sutil que agrada a los ojos.
57. ScrollReveal.js
ScrollReveal.js es una herramienta popular para crear animaciones de desplazamiento. Con su método principal de reveal () puede administrar diferentes animaciones y controlar todos sus aspectos estándar. Lo bueno es que funciona bien con navegadores web y móviles.
58. Scrollanim
Scrollanim es una herramienta menos sofisticada pero más manejable y sencilla de usar que el ejemplo anterior. Aunque favorece a CSS3, pero le permite agregar animaciones mediante JavaScript API para producir animaciones activadas por desplazamiento. Tiene una serie de soluciones preconstruidas que puede introducir rápidamente en su proyecto.
59. ScrollTrigger
Mientras que las dos soluciones anteriores se concentran principalmente en el desplazamiento vertical tradicional, éste es para construir sitios web horizontales largos. Te permite construir interfaces dinámicas en el plano del eje x poblado con bellas animaciones CSS3 usando una sintaxis bastante primitiva.
60. Force.js
Force.js es una solución pequeña que se ve privada de una gran funcionalidad y riqueza de opciones. Sin embargo, es ideal para tareas regulares como configurar objetos en movimientos sutiles o embellecer el desplazamiento. Como de costumbre, la relajación radica en su núcleo haciendo que la animación sea limpia y ordenada.
61. AOS
AOS significa animado en desplazamiento. Hace lo que dice: le proporciona un montón de efectos predefinidos que se desencadenan mediante un evento de desplazamiento. Si desea dar a las secciones una entrada dramática sin profundizar en el código, entonces es ciertamente para usted.
62. Rellax
Rellax es para bella paralaje Es una biblioteca de JavaScript ligera y vainilla para dar un toque sutil de dimensión 3D a las interfaces.
63. Tilt.js
Tilt.js produce un intrigante efecto de inclinación impulsado por paralaje. Moverá los objetos a una posición inclinada imitando 3D en un plano 2D básico. Puede arreglar un eje haciendo que el efecto sea más seductor e interesante, o recrear algún tipo de resplandor o sensación flotante.
64. Transformar-cuando
Transformar cuando es una gran solución para diseñar experiencias narrativas con un alto rendimiento y soporte nativo para dispositivos móviles. Apuesta por dos parámetros vitales: el tiempo y la posición de desplazamiento, lo que hace que la aventura del usuario a través de la interfaz esté controlada a tu lado. Funciona con SVG y elementos HTML normales.
65. Animación CSS3
Esta es un generador de la vieja escuela con una vista previa en vivo para crear animaciones básicas de CSS3. Hay un centro de control estándar donde puede ajustar la duración de la transición, el número de iteraciones, las funciones de tiempo, etc. La rutina es simple: configure todo, copie los códigos HTML y CSS resultantes y péguelos en su proyecto.
66. Curve.js
Curve.js da vida a las líneas haciéndolas "bailar" y girar como una ola. Úselo para crear fondos abstractos elegantes inspirados en la geometría o centros de mesa.
67. Animator.js
Animator.js se dice que es flexible, eficiente y ligero. Ofrece la forma más sencilla de administrar los fotogramas clave y generar animaciones CSS de varias escalas. También es libre de dependencia.
68. Cel-animación
Cel-animación es una mezcla de Sass que le da control sobre los fotogramas clave tradicionales. Puede poner en movimiento SVG o cualquier tipo de elementos HTML.
69. Scrollissimo
Scrollismo fue creado para trabajar en colaboración con Greensock hábilmente y animando suavemente los objetos en el desplazamiento del usuario. Con un complemento de JavaScript adicional para dispositivos de pantalla táctil, cubre numerosos dispositivos.
70. jqClouds
jqClouds es un plugin primitivo que genera y rellena un diseño con nubes en movimiento que se disparan sobre la interfaz. Puede cambiar el concepto, reemplazando nubes por cualquier otro objeto, para darle a una interfaz estática un sabor dinámico particular.
71. Animación de color
Como habrás adivinado, esta herramienta es para animar el tono y la transparencia de fondo, borde o texto. En realidad, funciona con el color de cualquier objeto que lo tenga como propiedad.
72. Flubber
Para excluir saltos repentinos y una metamorfosis drástica que puede ocurrir cuando un objeto se convierte en otro, puede usar Flubber . El complemento ofrece interpolaciones suaves entre las dos formas. El único inconveniente es que solo funciona con gráficos 2D.
73. Particles.js
Si está listo para la animación de partículas lúdicas, una opción popular hoy en día, puede usar este práctico generador . Se basa en una biblioteca de JavaScript viable que hace todo el trabajo. Establezca preferencias como color, número, forma, tamaño, opacidad, etc. y simplemente exporte el resultado.
74. Animación de líneas tridimensionales con Three.js
Este es un pequeño script que no posee todas las capacidades de los complementos mencionados anteriormente. No obstante, agrega a su interfaz un hermoso fondo animado lleno de animación de partículas. Puede configurar el color, las líneas, la opacidad y algunas otras opciones para que se integre en su entorno.
75. Three.js
Por último, si bien no menos importante, Three.js - una biblioteca poderosa y versátil que respalda numerosos sitios web impresionantes. Es adecuado para proyectos simples y complejos. Te deja trabajar con
