CSS Scroll-Driven Animations: Scrolleando con estilo

Luego de 5 años de trabajo (y 10 desde la primera propuesta), los navegadores modernos comenzaron a implementar las animaciones de scroll con CSS.

En este taller interactivo veremos cómo usar Scroll Progress Timeline y View Progress Timeline para crear efectos visuales dinámicos sin JavaScript. Estas técnicas avanzadas nos ayudarán a mejorar la experiencia del usuario con animaciones fluidas y responsivas solo con CSS.

Incluye ejemplos prácticos, código en vivo, recursos adicionales y espacio para preguntas.

Ideal para desarrolladores que buscan innovar en sus proyectos web con técnicas avanzadas sin JavaScript.

Cómo animar una landing page usando Greensock y ScrollTrigger

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.

SVG Magical Mystery Tour

En este workshop vamos a explorar distintas formas de incluir animaciones SVG en nuestros proyectos y compartir una amplia variedad de casos de uso para implementar combinándolo con otros lenguajes. El objetivo es que todos se lleven un aprendizaje sin importar el nivel de conocimiento que tengan.

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 intentaremos mostrar una amplia variedad de casos de uso y combinaciones con distintos lenguajes.
El índice contempla 3 partes:
- 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, 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 SMIL y GSAP.