Animação

Spring easing toggle

Um bloco que desliza entre duas paradas em uma curva de mola inserida em uma transição simples CSS, com a curva gerada plotada ao lado dela.

Como usar Spring easing toggle

Um bloco que desliza entre duas paradas em uma curva de mola inserida em uma transição simples CSS, com a curva gerada plotada ao lado dela.

Teste a prévia com o mouse e o teclado. Verifique o foco visível e o layout em telas estreitas na sua página. Informe o número ou o identificador do componente ao seu agente de programação.

Propriedades: bounce, duration, accent, showCurve, spin

Quais frameworks estão disponíveis?

O catálogo inclui estas versões: react, vue, svelte, astro, html. A prévia desta página usa React.

Como acessar a implementação?

O código, as versões e os comandos de instalação estão disponíveis no painel acima.

Conecte seu agente

Componentes relacionados

1772Easing preview tileAnimaçãoUm bloco que reproduz a mesma escala em qualquer curva de atenuação escolhida, com a curva desenhada ao lado e um marcador sincronizado.

1773Entrance timing playgroundAnimaçãoUm disco reproduz o mesmo movimento de entrada sob demanda para que você possa sentir exatamente qual duração, atraso e curva de atenuação contribuem.

1676Composable RevealAnimaçãoUm invólucro revelador cujas partes de deslizamento, fade, zoom e desfocagem podem ser ativadas e combinadas em uma única transição de mola.

1810Spring tunerAnimaçãoUm bloco que salta entre dois estados enquanto um traço vivo traça sua ultrapassagem, para que a rigidez, o amortecimento e a massa possam ser sentidos e lidos ao mesmo tempo.

1814Swap timing modesAnimaçãoTrês emblemas trocam o mesmo par de ícones lado a lado sob três regras de saída diferentes, de modo que remoções sobrepostas, sequenciais e out-of-flow podem ser comparadas rapidamente.

1763Bobble tile gridAnimaçãoUma grade de peças coloridas que se afastam do ponteiro em uma mola, saltando com mais força à medida que o ponteiro passa por elas.