AtlanticaConf 2025

Y sin embargo, se mueve! Perdámosle el miedo a las CSS Scroll Driven Animations
2025-06-14 , Track Raiola Networks
Language: Español

Las scroll-driven animations permiten crear animaciones reactivas al scroll de forma nativa con CSS, sin necesidad de JavaScript. Esto no solo simplifica el desarrollo, sino que mejora el rendimiento al ejecutarse fuera del hilo principal.
En esta charla se introducirán las dos nuevas líneas de tiempo disponibles en CSS:
• Scroll Progress Timeline: controla la animación según la posición del scroll dentro de un contenedor, permitiendo mover elementos en los ejes x/y o block/inline.
• View Progress Timeline: similar a IntersectionObserver de JavaScript, permite animaciones basadas en la visibilidad de un elemento en pantalla.
También veremos las propiedades animation-timeline y animation-range, que definen cuándo y cómo deben comenzar y terminar las animaciones.
Por último, se abordarán aspectos clave como el soporte en navegadores, estrategias de progressive enhancement y consideraciones de accesibilidad.


Nivel esperado de la audiencia?:

Intermedio

Licenciado en Bellas Artes y Doctor en Diseño, su investigación doctoral se centró en el código como herramienta creativa. Desde el año 2000 ha desarrollado su carrera en el mundo digital, desempeñando roles de diseñador, maquetador y desarrollador web. Su transición hacia el desarrollo fue impulsada por su pasión por el código, iniciada con ActionScript y consolidada en el ámbito del frontend.

Durante una década fue profesor en la Facultad de Bellas Artes, donde impartió asignaturas centradas en Creative Coding. Actualmente, colabora en varios programas de posgrado, compartiendo conocimientos en UX, HTML y CSS. A lo largo de los años, ha participado como ponente en congresos y eventos como el OFFF, abordando temas en la intersección entre diseño y tecnología.

Desde 2021, forma parte del equipo de Cognizant Netcentric como Frontend Engineer. Además de sus responsabilidades técnicas, dedica parte de su tiempo a fomentar y divulgar el uso y la evolución del CSS dentro de la comunidad frontend de la compañía.