Branding the Discourse splash screen with custom SVG images

I initially tried to use animated SVG for the splash screen. While this works on desktop, I found that on mobile, animating complex paths or SVG-internal elements directly, results in lagging and even animation stopping.

To ensure a smooth experience, I shifted the animation logic to a standard HTML container (div) wrapped around the SVG. By applying the CSS animations (transform, scale, opacity) to the div wrapper instead of the SVG, mobile browsers can use hardware acceleration much more efficiently without lagging.

5 Likes