SVG Animations

Libro de Sarah Drasner, conocida por sus artículos en CSS-Tricks, sus demos en CodePen y su trabajo en el equipo central de Vue, sobre cómo animar gráficos SVG en la web, desde las animaciones habituales de interfaz hasta piezas complejas y responsivas. Publicado en 2017, está dirigido a desarrolladores frontend y diseñadores de nivel intermedio que ya manejan HTML, CSS y JavaScript y quieren usar la animación SVG de forma profesional, con compatibilidad entre navegadores, buen rendimiento y adaptada a cualquier pantalla.

Empieza por la anatomía de un SVG (viewBox, formas, rutas y grupos) y la animación con CSS, incluidos sprites dibujados a mano y sprites responsivos. Sigue con animaciones de UI/UX sin librerías externas, visualización de datos animada y una comparación de tecnologías de animación web. La parte central se dedica a GreenSock (GSAP): timelines, MorphSVG, movimiento a lo largo de una ruta, efectos escalonados, interpolación de colores HSL, SplitText, DrawSVG y Draggable. También presenta Mo.js y React-Motion, animación de atributos con requestAnimationFrame, técnicas responsivas y cómo diseñar, prototipar e integrar animaciones en librerías de componentes, además de cómo planificar, depurar y medir el rendimiento.

No hay un proyecto guiado, sino muchos ejemplos y demos (la mayoría en CodePen) que muestran cada técnica aplicada a casos reales. Su gran aporte es la comparación honesta entre tecnologías y la experiencia práctica de la autora. Conviene saber que se apoya mucho en GSAP, varios de cuyos plugins eran de pago en aquella época (hoy son gratuitos); que React-Motion está prácticamente abandonado; y que SMIL apenas se trata. Sus fundamentos de SVG, rendimiento y diseño de animación siguen siendo muy vigentes.