En este post vamos a tratar una de las técnicas más modernas para presentar gráficos animados en nuestra web, combinando dos bibliotecas Javascript: Snap.svg para manipular los ficheros SVG; y GreenSock para las animaciones.


Es un tema que da para bastante literatura, y por tanto lo dividiremos en dos o tres publicaciones. En esta primera vamos a ver como preparar el entorno y construir una animación sencilla.

Los ficheros SVG cada vez están tomando más fuerza en la web ya que nos permiten ahorrar tamaño y al mismo tiempo la posibilidad de escalarlos sin pérdida de calidad, al ser un formato vectorial. Esto es una gran ventaja de cara a la compatibilidad con las pantallas hdpi como las pantallas retina de los Macs.

¿Qué es Snap.svg?
La forma más fácil de explicarlo es con un símil, Snap.svg es a los ficheros SVG lo mismo que jQuery al DOM. Nos permite crear gráficos interactivos que funcionan en cualquier resolución y pantalla. Es Open Source y completamente gratuita.

¿Y qué es GreenSock?
Una herramienta que nos permite animar cualquier elemento del DOM de forma sencilla y eficiente. Al ser SVG un formato XML, podemos usar perfectamente toda la potencia de GreenSock (GS) en nuestras animaciones.

¿Quieres ver un ejemplo de lo que se puede conseguir mediante la combinación de ambas técnicas? 
Entra en nuestra web, en la página de inicio (Home)  encontrarás una animación de un robot realizada con esta técnica.

Como ya se ha comentado, en este primer post vamos a ilustrar con un ejemplo sencillo como trabajar con estas dos bibliotecas. En el próximo post realizaremos una animación más compleja importando diferentes gráficos desde un software de ilustración vectorial.

¡¡Comenzamos!!

Lo primero es incluir las bibliotecas en nuestro fichero HTML. Las puedes descargar desde: http://www.snapsvg.io y http://greensock.com, o bien usar directamente las siguientes CDNs:

https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineMax.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js

Como vamos a manipular variables de snapJS mediante GS, necesitamos también el plugin que nos permite hacerlo. He incluido el código en este codepen para que lo podáis utilizar: http://codepen.io/anon/pen/eJWOEP

Una vez tengamos nuestro fichero HTML preparado podemos empezar a escribir el código de nuestra animación. En el fichero HTML, solo tenemos que incluir un elemento contenedor de nuestra animación, por ejemplo:

<svg id="svg"></svg>

Necesitamos también un pequeño CSS para dar formato al elemento que contendrá la animación:

#svg{
  width:100%;
  height:500px;
  background:#eee;
}

A continuación vamos a crear un fichero javascript separado donde escribiremos el código de nuestra animación. Empezaremos por algo sencillo, vamos a dibujar un círculo utilizando SnapSVG:

$(document).ready(function(){
  var s = Snap("#svg");
  var circulo = s.circle(50, 50, 25);
});

Ahora vamos a animar este circulo usando la biblioteca greensocks.

TweenLite.to(circulo, 6, {
    snap:{
      tx:"+=300"
    }
  });

Con esto concluimos este post, que espero que sirva de introducción. A partir de aquí, podéis experimentar a animar diferentes parámetros como la opacidad, el tamaño, posición, color y tamaño del borde o incluso mezclar varios elementos.

Os animo a compartir vuestros experimentos en los comentarios, y si surge alguna duda intentaré resolverla.

Eppur si muove!