Animação

Morphing icon loop

Um único ícone preenchido se remodela continuamente no próximo ícone em uma pequena lista, seu contorno fluindo suavemente de uma silhueta para outra enquanto sua cor de preenchimento muda para combinar.

Syncing changes

Como usar Morphing icon loop

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: intervalSeconds, morphSeconds, size, advanceOnClick

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

2227Shape toggle morph iconAnimaçãoUm único ícone preenchido alterna entre duas formas somente quando clicado, seu contorno fluindo diretamente de uma silhueta para outra e sua cor fazendo crossfading para combinar, mantendo-o pressionado até ser clicado novamente.

1766Color blend compareAnimaçãoDuas amostras circulam entre o mesmo par de cores, uma misturada em valores brutos de canal e outra em luz linear, mostrando a queda causada por uma transição simples.

1782Keyframe morph loopAnimaçãoUm quadrado que executa uma rotina contínua de crescer, girar e girar em um círculo, mantendo-se em cada pose porque as paradas de tempo são irregulares.

2193Morphing icon toggleAnimaçãoUm pequeno ícone transforma continuamente seu contorno entre duas formas e duas cores em um loop constante.

1791Orbiting badgesAnimaçãoPequenos emblemas espaçados uniformemente em torno de uma ou duas pistas circulares, cada anel girando em sua própria velocidade e direção enquanto os emblemas permanecem na posição vertical.

1792Path followerAnimaçãoUm ladrilho arredondado que percorre uma trilha em espiral ondulada enquanto a própria trilha avança à frente dela e depois volta ao início.