Advertisement
  1. Web Design
  2. Animation

10 repositorios de GitHub recomendados para crear animación en la Web

Scroll to top
Read Time: 6 min

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

GitHub es un excelente lugar en el que encontrar proyectos que se distribuyen libremente al público, pero ¿alguna vez has asignado una estrella a un repositorio y has acabado olvidando lo genial y útil que podría ser? En este artículo sacaré a la luz algunos fantásticos proyectos disponibles de forma libre en GItHub que se enfocan principalmente en ayudar a aquellos que quieren crear animaciones para la web.

1. Rellax

Rellax es una librería súper ligera para crear suaves efectos de paralelaje que además funciona en varios dispositivos. Sin escribir toneladas de código, podrás aprender a crear una experiencia de desplazamiento suave para tu proyecto y comprender completamente los entresijos que definen el efecto de paralaje.

2. Dynamics.js

Si prefieres crear una animación más realista que se base en la física para tu trabajo, no busques más, lo que necesitas es dynamics.js.

Con ella, puedes animar propiedades CSS de cualquier elemento DOM, propiedades SVG y objetos JavaScript. Esta librería no solo pondrá a prueba tu destreza en JS, sino que además aprenderás cómo la física puede crear una experiencia más intuitiva y realista para los usuarios.

Los controles deslizantes de su página de inicio te ayudan verdaderamente a entender cómo funciona cada propiedad en combinación con el resto para crear animaciones basadas en la física que reflejan los movimientos de nuestros mundo real.

3. Barba.js

Crea transiciones impresionantes, suaves y fluidas entre las páginas de tu sitio web. Barba.js es una pequeña librería (4kb minificada y comprimida con gzip), flexible y sin dependencias que te ayuda a elevar la experiencia de usuario en tu sitio web a un nivel superior.

También es una lección sobre cómo puede usarse PJAX (push state AJAX) y la API Push State para mejorar las transiciones de página. Si nunca has oído hablar de estas tecnologías, será una excelente introducción a ellas que, al final, da como resultado un efecto muy elegante para recorrer las páginas.

Consejo: echa un vistazo a este tutorial para aprender más sobre Push State:

4. Wick

Wick es el paquete de herramientas de creación multimedia gratuito y de código abierto de Internet. Es un entorno de animación y codificación híbrido basado en el navegador para construir interactividad para la web. Inspirado en gran medida en herramientas como Flash (¿habéis escuchado hablar de animaciones basadas en fotogramas clave?), HyperCard y Scratch, fue desarrollado en respuesta a la creciente necesidad de una herramienta de este tipo para la web moderna.

Crea suaves animaciones utilizando el navegador como guía, sin descargar ningún software adicional para realizar la tarea.

5. Bounce.js

Crea bellas animaciones con tecnología CSS3 en poco tiempo. La herramienta disponible en bouncejs.com te permite generar fotogramas clave estáticos que se pueden utilizar sin ningún JavaScript adicional, pero si deseas que la aplicación los genere sobre la marcha, puedes utilizar la librería Bounce.js.

La presentación del fotograma clave es definitivamente intrigante y perspicaz en el uso de la función CSS matrix() y en la construcción de fotogramas clave. Es una gran herramienta para afinar a conciencia una animación concreta y entender cómo se pueden utilizar los fotogramas clave para crear impresionantes animaciones con esquema de rebote. También hay un gran artículo en Medium, escrito por su creador Joel Besada, sobre la reducción del número de fotogramas clave generados, sobre por qué es esto algo por lo que vale la pena esforzarse, y una fascinante visión sobre la desaceleración.

Nota: en la actualidad Bounce ya no está en desarrollo activo, y tampoco existen planes de que lo vaya a estar en un futuro según Joel.

6. Anime

Anime es una ligera librería JavaScript de animación. Funciona con cualquier propiedad CSS, transformaciones CSS individuales, SVG o cualquier atributo DOM y objetos JavaScript.

Se trata de una maravillosa librería para comprender cómo construir y aprender sobre las animaciones basadas en una línea temporal, iniciar animaciones en ciertos valores, crear complicadas animaciones de fotogramas clave, definir los tiempos de inicio en relación con la duración de animaciones anteriores, construir controles de reproducción y mucho más.

Te sugiero encarecidamente que la pruebes y si deseas ir aún más allá, también encontrarás un montón de demostraciones en CodePen.

7. Wait! Animate

Ésto me encanta. Wait! Animate proporciona un método sencillo para calcular los porcentajes de los fotogramas clave de manera que después puedas insertar un retardo entre cada iteración de la animación.

Hay una herramienta de configuración para agregar pausas en tus propias animaciones sin necesidad de usar JavaScript, ya que CSS no proporciona una manera fácil de pausar una animación antes de que se repita en bucle de nuevo; animation-delay simplemente añade un retraso al inicio de la animación.

Incluso puedes personalizar la sincronización, la duración y la dirección del movimiento con el fin de afinar la animación a tu gusto. Esta es una manera muy divertida de aprender sobre la animación y te proporciona feedback en tiempo real para que realices tus ajustes.

8. MoJS

MoJS es un "cinturón de herramientas para gráficos animados en la web". Te permite crear animaciones y efectos suaves y sedosos para crear una experiencia de usuario asombrosa. Incluso hay una opción para crear una compilación personalizada según las necesidades de tu actual proyecto; ¡está claro que lo s tamaños de archivo grandes son un excesivo coste!

Hay un montón de demostraciones en las que inspirarte y también muchas otras listadas en GitHub. Aprende a crear algunos efectos de animación realmente cautivadores como mi favorito, "Bubble Layout", revelación de palabras, estelas de polvo y otros efectos como "ráfaga", y mucho más. Si quieres aprender a crear efectos complicados e intrincados no busques más, porque MoJS te cubre las espaldas.

9. Spirit

Otro fantasma… Spirit es una soberbia herramienta de animación para la web (puedes encontrar la app aquí); ponte en marcha y anima objetos usando una linea de tiempo con interfaz visual. ¡Solo sé que te sorprenderá!

Spirit cambiará la forma en la que creas animaciones para la web. Te proporciona un completo control sobre la línea de tiempo, la capacidad de inspeccionar las animaciones y una API fácil de aprender y entender. Es una manera intuitiva y sencilla de comprender cómo construir animaciones sin la gran sobrecarga de tener que aprender software complicado.

10. ScrollReveal

ScrollReveal te ofrece sencillas animaciones de desplazamiento para la web. Además es una librería ligera; y no tiene ninguna dependencia, solo pesa 3.3Kb minificada y comprimida en formato Gzip.

Mójate los pies con animaciones secuenciales basadas en intervalos que se pueden configurar para cargar de forma asincrónica. ScrollReveal también es compatible con la rotación 3d, eso significa que podrás aprender a obtener tu 3D y ser realmente creativo sin tener que comprender la funcionalidad de desplazamiento subyacente y su mecánica.

Reflexiones finales

¿Conoces otros repositorios de código abierto que haya olvidado mencionar? ¿Has usado alguno de los proyectos que hemos enumerado en este artículo? ¡Deja un comentario y un enlace a continuación! Espero que al menos uno de estos ejemplos te pueda ser útil en tu trabajo diario. ¡Disfruta trabajando con código!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.