Personalizando a tela de abertura do Discourse com imagens SVG personalizadas

Note que há uma pequena alteração no que estamos permitindo para animação SVG (e atualizei o OP para refletir isso). Originalmente, estávamos permitindo animações SMIL em SVGs, mas descobrimos que elas engasgam porque o navegador pausa esse tipo de animação enquanto o javascript é executado.

Portanto, a recomendação é usar apenas animações de transformação CSS e opacidade em seus SVGs, pois estas não são bloqueadas por JS.

Se você olhar o SVG do @ばこん acima… ele fornece um bom exemplo de uma animação permitida:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

Tenha também o cuidado de dar nomes exclusivos às suas animações para que não entrem em conflito com outras animações no Discourse (nomes como “blink”, “rotate”, “fade”, etc. podem ser muito genéricos). Usar um prefixo como unique- é uma ótima maneira de evitar isso.

4 curtidas