FLIP Layout Animation

Um elemento parece se mover e mudar de tamanho até um elemento correspondente em outro lugar, como se fossem um só.

Adicione uma "Shared Layout Animation" (também chamada shared element dentro da página) em [onde].
Quando a seleção mudar, o elemento deve parecer se mover e mudar de tamanho suavemente da posição antiga para a nova, assentando com delicadeza, para ser percebido como um único objeto e não dois.
Mostre só uma cópia por vez e evite que o layout ao redor salte durante o movimento.

Os itens aparecem deslizando quando adicionados e saem animados quando removidos, enquanto os vizinhos fecham o espaço.

Adicione uma animação "List Item Enter/Exit" (também chamada animated list) em [onde].
Um item novo deve primeiro abrir o seu espaço e depois aparecer deslizando; um item removido deve primeiro sumir e depois se recolher, para que os vizinhos fechem o espaço com suavidade.
Mantenha o item removido no lugar até a saída terminar, para que a lista nunca pule quando itens forem adicionados ou removidos.

Ao aplicar um filtro ou ordenação, os blocos da grade se reorganizam, somem ou deslizam para novas posições.

Adicione um efeito "Masonry / Grid Shuffle" (também chamado filterable grid animation) em [onde].
Ao aplicar um filtro, os blocos que não combinam mais devem encolher e sumir no lugar, enquanto os restantes deslizam suavemente para as novas posições; ao limpar o filtro, toca ao contrário.
Não deixe a página ao redor pular enquanto a altura da grade muda, e faça dos controles de filtro botões de verdade que informem qual filtro está selecionado.

Ao arrastar um item, os outros deslizam para abrir espaço e se acomodam na nova ordem.

Adicione uma "Drag-to-Reorder List" (também chamada sortable list) em [onde].
O item arrastado deve seguir o ponteiro diretamente e se erguer um pouco, enquanto os outros itens deslizam suavemente para sair do caminho; ao soltar, ele deve se acomodar rápido no espaço mais próximo.
Aceite toque além de mouse, e ofereça um jeito de mover itens pelo teclado, com a nova posição anunciada para leitores de tela.

Uma linha de conteúdo desliza para o lado em um loop infinito e contínuo.

Adicione um letreiro (Marquee) em [onde]: uma faixa que rola na horizontal sem parar, também chamada de ticker.
O conteúdo deve deslizar da direita para a esquerda em velocidade lenta e constante, em um loop contínuo sem saltos visíveis.
Pause ao passar o mouse e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).