SVG nació finales de los años 90, pero fue un lenguaje ignorado por muchos hasta 2017, cuando volvió en pleno apogeo. Este formato de imagen vectorial cumple con todo lo que necesitamos en la web moderna de hoy: escalabilidad, responsiveness, interactividad, programabilidad y accesibilidad. En este taller mostraremos una amplia variedad de casos de uso y combinaciones con distintos lenguajes.
• Introducción: Qué es SVG, beneficios, sintaxis, cómo escribir código SVG simple, principales tags y atributos.
• Ejemplos: Cómo editar y animar SVG, cómo ir desde Illustrator al código, herramientas y tips para compresión y optimización, atributos para animar con HTML5, CSS, SASS y JS que nos puedan ayudar a construir una mejor UX. Live coding de ejemplos.
• Cierre: Tips de accesibilidad, otras formas de animar con SMIL y GSAP.
Durante este taller, exploraremos las posibilidades de GreenSock Animation Platform (GSAP), una de las librerías de animaciones JavaScript más populares en la actualidad.
GSAP ofrece una amplia gama de plug-ins y herramientas que permiten crear animaciones complejas y efectos avanzados con facilidad. Nos vamos a enfocar en el uso del plugin ScrollTrigger, una extensión de GSAP creada para sincronizar animaciones con el desplazamiento de la página.
Aprenderás cómo trabajar con HTML, CSS y SVG utilizando Greensock, y descubrirás cómo controlar el tiempo y la interactividad de las animaciones de tus proyectos.
Ver en YouTube