Mini-componentes animados Animações

O que é

Efeitos pequenos, prontos, com seu próprio markup (não seguem a sintaxe sw-ani geral) — revelam sozinhos quando o usuário rola até eles.

Como funciona

A barra de preenchimento e o traço SVG usam uma variável CSS pra saber até onde ir (--sw-bar-to, --sw-draw-len) — o JS anima essa variável de 0 até o valor quando entra na tela.

Exemplos

<div sw-flip-card><div sw-flip-card-faces>
  <div sw-flip-card-face>Frente</div>
  <div sw-flip-card-face="back">Verso</div>
</div></div>

<div sw-bar-fill style="--sw-bar-to:.75"><span></span></div>
<!-- preenche de 0 até 75% ao entrar na tela -->

Atributos

Nenhum.

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.