Deividart- Blog de diseño gráfico y diseño/desarrollo web

Atrévete con la animación web con estas herramientas

Animación web

En un artículo anterior hicimos mención a la librería Lottie que nos permitía hacer uso de animaciones creadas en After effects en sitios webs y aplicaciones móviles. Hoy quiero presentar una serie de recursos, de los muchos que hay en el mercado, que nos ayuda en la animación web, sin necesidad de ser un crack en programación, simplificándonos mucho el trabajo.

Librerías y herramientas online para animación web

Animación web

GSAP

Se trata de GreenSock Animation Platform (GSAP) y según su página oficial, promete animar cualquier objeto que Javascript pueda tocar, siendo incluso 20 veces más rápido que jQuery.

En su web encontramos una muestra de ejemplos aplicando esta librería en casos reales, que nos inspirarán para conseguir resultados sorprendentes.

Empresas de la talla de Google, Samsung, Amazong, Adobe o Fox, hacen uso de esta librería en sus servicios.

Aquí os dejo un video de introducción para comenzar a familiarizarnos con sus nomenclaturas.


Ir a web


Anime JS

anime js

Trabaja con cualquier objeto web. CSS, SVG, DOM attributes y Objetos Javascript animados con una API unficada.

En Codepen han publicado una serie de ejemplos, donde podemos ver el potencial de esta herramienta. Aquí os dejo el enlace para que le echeis un vistazo.

Ir a web


Shape shifter

Shape Shifter

Con esta herramienta online podrás crear animaciones y exportarlas para usar en proyectos digitales, como sitios web o aplicaciones móviles. Su interfaz es muy sencilla y en poco tiempo sabrás hacer animaciones top, pudiendo controlar después y mediante código parámetros como la opacidad, color, trazo, etc…

A continuación os dejo un video en el que podeis ver un ejemplo paso a paso en la creación de una sencilla animación.

YouTube video player
Ir a web


Animate css

Animate CSS

Esta herramienta es bastante simple, pero precisamente por su sencillez y la posibilidad de realizar animaciones predefinidas bastante convincentes creo interesante mencionarla.

Su uso se centra para proyectos web, Yo la he usado en sitios como Mitablao o Dental San Rafael , y por propia experiencia puedo decir que en poco tiempo conseguimos animaciones que de otra manera necesitariamos un mayor conocimiento de Javascript.

Ir a web

Salir de la versión móvil