Diseño de la pantalla de inicio de Discourse con imágenes SVG personalizadas

Inicialmente intenté usar SVG animado para la pantalla de presentación. Aunque esto funciona en escritorio, descubrí que en dispositivos móviles, animar rutas complejas o elementos internos del SVG directamente, provoca retrasos e incluso detiene la animación.

Para garantizar una experiencia fluida, trasladé la lógica de animación a un contenedor HTML estándar (div) que envuelve al SVG. Al aplicar las animaciones CSS (transform, scale, opacity) al contenedor div en lugar de al SVG, los navegadores móviles pueden utilizar la aceleración por hardware de manera mucho más eficiente sin retrasos.

5 Me gusta