Брендинг экрана приветствия Discourse с помощью пользовательских SVG-изображений

Изначально я попытался использовать анимированный SVG для стартового экрана. Хотя на десктопе это работало, я обнаружил, что на мобильных устройствах прямая анимация сложных путей или внутренних элементов SVG приводит к подтормаживаниям и даже остановке анимации.

Чтобы обеспечить плавный пользовательский опыт, я перенёс логику анимации в стандартный HTML-контейнер (div), обернувший SVG. Применяя CSS-анимации (transform, scale, opacity) к обёртке div, а не к самому SVG, мобильные браузеры могут гораздо эффективнее использовать аппаратное ускорение без подтормаживаний.

5 лайков