Javascript es un lenguaje de programación muy polivalente que habitualmente se usa para configurar el front-end de tu página web. Entre todas las características que ofrece, la animación de elementos gráficos es una de ellas. La animación se puede llevar a cabo de forma nativa usando las funciones setTimeout(), setInterval() o requestAnimationFrame(). O se puede usar una de las bibliotecas que ya implementan herramientas para tal fin. Existen muchas: THREEJS, PHYSIJS, PIXIJS, etc. Pero de la que quiero hablarlos hoy es de la librería GSAP3.
GSAP 3 es una librería de JavaScript que permite crear animaciones mediante el empleo de líneas de tiempo y aplicarlas a los elementos que componen nuestra web. Así de fácil, de hecho con tan solo una línea de código se puede crear una animación compleja.
Algunos elementos de la web, requieren tratamientos diferentes, por el tipo de objeto y animación que se lleva a cabo. Para eso, GSAP dispone de un conjunto de plugins, cada uno de los cuales permite crear diferentes tipos de animaciones. Como la lista es larga, para no extenderme mucho os paso un enlace que explica cada uno ellos: https://greensock.com/gsap-plugins/
DRAWSVG libreria para animar texto web
De entre todos los plugins disponibles en GSAP, tenemos DRAWSVG. Este plugin es gratuito y te lo puedes descargar siempre que te hayas registrado en la web de GSAP. Os animo a hacerlo aquí. Para poder animar cualquier texto de tu web usando esta libreria debemos diferenciar dos etapas:
- Diseño: Con Illustrator o cualquier herramienta de dibujo vectorial creamos nuestro texto y además creamos nuestro «path» o trazo, que nos permita dirigir nuestra animación. Por último, exportamos nuestra ilustración en SVG.
- Ensamblaje: En nuestro documento HTML importamos nuestro SVG y nuestra librería GSAP y DRAWSVG. Es muy importante mantener el orden de importación de nuestras librerías. Un ejemplo de la exportación SVG y de cómo quedaría nuestro documento HTML sería como sigue:
<div id="container">
<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="326.92px" height="252.56px" viewBox="0 0 326.92 252.56" style="enable-background:new 0 0 326.92 252.56;"
xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#9C4B97;}
.st2{fill:#71B739;}
.path_st1{fill:none;stroke:white;stroke-miterlimit:10;stroke-width:40px}
.path_st2{fill:none;stroke:white;stroke-width:40;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<rect class="st0" width="326.92" height="252.56"/>
<g>
<path class="st1" d="M47.13,57.7h27.69c17.87,0,29.96,0.82,36.25,2.46c6.3,1.64,11.09,4.34,14.37,8.09
c3.28,3.75,5.33,7.93,6.15,12.52c0.82,4.6,1.23,13.64,1.23,27.11v49.83c0,12.77-0.6,21.31-1.8,25.62c-1.2,4.31-3.3,7.68-6.28,10.11
c-2.99,2.43-6.68,4.13-11.07,5.1S102.64,200,93.8,200H47.13V57.7z M84.13,82.05v93.6c5.33,0,8.61-1.07,9.84-3.21
c1.23-2.14,1.85-7.95,1.85-17.45V99.72c0-6.44-0.21-10.58-0.62-12.39c-0.41-1.82-1.35-3.15-2.81-4
C90.92,82.48,88.17,82.05,84.13,82.05z"/>
<path class="st2" d="M285.92,57.7L269.45,200h-46.2c-4.23-21.86-7.96-46.73-11.2-74.62c-1.48,11.96-4.92,36.83-10.32,74.62H155.8
L139.24,57.7h35.95l3.91,49.65l3.78,48c1.37-24.84,4.78-57.39,10.23-97.65h38.42c0.51,4.16,1.86,19.81,4.04,46.93l4.09,54.14
c2.1-34.44,5.55-68.14,10.33-101.07H285.92z"/>
</g>
<path class="path_st1" d="M114.56,161.36c0,11.8-2.59,19.03-7.76,21.69c-5.18,2.66-18.98,3.99-41.41,3.99V70.66
c17.01,0,28.59,0.53,34.76,1.58c6.16,1.06,10.1,2.72,11.83,4.97c1.72,2.26,2.59,7.4,2.59,15.41V161.36z"/>
<path class="path_st2" d="M268.74,45.41l-16.27,141.64h-14.23L217.42,76.47H206.1l-18.7,110.57h-14.91L158.25,45.41"/>
</svg>
<a href="#" class="button">Play</a>
<a style="text-align:center; display:block;margin-top:1em;" href="https://myhappycoding.com">myhappycoding.com</a>
</div>
No te asustes por el código anterior. En realidad, no lo escribes, tan solo copias y pegas tu dibujo de illustrator en tu editor de texto, por ejemplo: Sublime, dentro de la capa ‘container‘ que previamente hayas creado.
Es muy importante que cuando hayas copiado tu dibujo, te asegures de copiar también el ‘path’ para dirigir tu animación.
Por último, cada animación quedaría como una línea de texto con la siguiente apariencia:
var tween1=gsap.to(".path_st1",1,{drawSVG:"0 0%"})
var tween2=gsap.to(".path_st2",1,{drawSVG:"0 0%", delay: 1})
Fíjate en la sintaxis de cada línea. Verás que es muy intuitiva y fácil de entender:
- Objeto a animar
- Tiempo que dura la animación
- Porcentajes de inicio y fin de nuestra animación
Si deseas más información sobre las animaciones web usando esta librería, puedes consultar el siguiente enlace, donde aparecen multitud de ejemplos.
Te dejo el resultado y espero que hayas disfrutado de esta entrada.
Happycoding!!