Drag-to-Reorder List

Depois que o layout muda, os elementos deslizam suavemente para as novas posições e tamanhos.

Adicione uma "FLIP Layout Animation" (também chamada layout animation ou First-Last-Invert-Play) em [onde].
Quando o layout mudar, cada elemento deve deslizar da posição antiga para a nova em vez de pular, rápido no início e se acomodando suavemente.
Anime só com transforms para que a página não recalcule o layout a cada quadro, e vá direto para o novo layout se o usuário preferir movimento reduzido (prefers-reduced-motion).

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.

Um elemento segue o ponteiro ao ser arrastado e pode ser limitado a uma área ou a um eixo.

Adicione uma interação "Drag" (também chamada draggable ou drag constraints) em [onde].
O elemento deve seguir o ponteiro diretamente enquanto é arrastado, parar nas bordas da área permitida e voltar à posição de repouso com um pequeno quique ao ser solto.
Faça funcionar tanto com toque quanto com mouse, sem a página rolar por baixo, e ofereça uma forma de movê-lo pelo teclado.

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.

Um painel lateral desliza a partir da borda esquerda, direita ou superior, empurrando ou cobrindo o conteúdo.

Adicione um menu lateral ("Drawer Slide", também chamado off-canvas ou side sheet) em [onde].
O painel deve deslizar a partir da borda lateral sobre o conteúdo enquanto a página de trás escurece, rápido e desacelerando suavemente, e sair do mesmo jeito ao fechar.
Mantenha o foco do teclado dentro do menu aberto, feche com Escape ou com um clique na área escurecida, e devolva o foco ao botão que o abriu.