Swipe to Delete

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.

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.

Os cards se empilham com pequenos deslocamentos e o de cima se afasta para revelar o próximo.

Adicione um "Card Stack" (também chamado stacked cards) em [onde].
Empilhe os cards com pequenos deslocamentos, um atrás do outro; cada clique deve afastar o card de cima para o lado e colocá-lo no fundo enquanto os outros avançam: suave, leve e rápido.
Faça funcionar pelo teclado, deixe os leitores de tela chegarem a cada card em ordem e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um botão redondo desliza por um trilho e a cor do trilho muda entre desligado e ligado.

Adicione uma animação "Toggle Switch" (também chamada switch) em [onde].
Ao ligar ou desligar, o botão redondo deve deslizar suavemente até a outra ponta do trilho enquanto a cor do trilho muda: rápido e nítido, sem quique.
Mantenha como um switch acessível real (role="switch" com seu estado checked) que também funcione pelo teclado.

A imagem do produto encolhe e voa em arco até o ícone do carrinho.

Adicione uma animação "Add to Cart Fly" (também chamada fly to cart ou add-to-cart animation) em [onde].
Quando o botão de adicionar for pressionado, uma pequena cópia da imagem do produto deve encolher enquanto voa em um arco suave e rápido até o ícone do carrinho, e o carrinho deve dar um pequeno pulo ao atualizar a contagem.
Reproduza uma vez por clique sem mover o card original do produto, e pule o voo se o usuário preferir movimento reduzido (prefers-reduced-motion), mas continue atualizando o carrinho.

Ao marcar a caixa, um sinal de visto é desenhado traço a traço dentro dela.

Adicione uma animação "Checkbox Check Draw" (também chamada animated checkbox ou checkmark draw) em [onde].
Quando a caixa for marcada, ela deve se preencher de cor e o sinal de visto deve se desenhar sozinho em um traço rápido e suave; ao desmarcar, ele se apaga do mesmo jeito.
Mantenha como um checkbox de verdade, com seu estado de marcado, funcionando pelo teclado e com um anel de foco visível.