Motion
Use movimentos para facilitar a compreensão de como funciona a interface e os componentes, além de expressar e reforçar os princípios da marca RD Station.
Princípios
Movimentos devem ser utilizados sempre com um propósito. Use para destacar uma mudança de estado, mostrar um novo conteúdo ou componente e para enfatizar um elemento da interface.
Movimentos não devem levar mais tempo do que necessário As animações não devem fazer a pessoa esperar, nem impedir que ela complete ou continue realizando uma tarefa.
Mantenha as metáforas que existem no mundo físico. Por exemplo, se algo entrou na tela pelo lado esquerdo, ele deve sair pelo lado esquerdo e não para cima. Outra situação: elementos menores se movem mais rapidamente que elementos maiores.
Duração
Use uma das 3 velocidades diferentes para fazer transições:
| Token | Duração | Aplicações |
|---|---|---|
--motion-duration-extra-fast | 100ms | Use para mudanças de estado em elementos pequenos, como botões, toggles, radio buttons, checkboxes, inputs, entre outros. |
--motion-duration-fast | 200ms | Use para microinterações, expansões curtas ou movimentos de curta distância, como a de um select ou dropdown. |
--motion-duration-normal | 300ms | Use para expansão de elementos de tamanho médio e sistema de alertas, como Toasts. |
Aceleração
Para serem percebidos com maior naturalidade pelo olho humano, todos os movimentos usam aceleração. Use um dos 3 tipos abaixo:
| Token | Curva | Descrição | Aplicações |
|---|---|---|---|
--motion-timing-function-ease-in | cubic-bezier(0.55, 0.055, 0.675, 0.19) | Ganha aceleração com o tempo. Ideal para remover elementos da tela. | Fechar modal, esconder alerta, recolher sidebar. |
--motion-timing-function-ease-out | cubic-bezier(0.215, 0.61, 0.355, 1) | Perde aceleração com o tempo. Ideal para adicionar elementos na tela. | Mostrar sidebar, apresentar modal, mostrar alerta. |
--motion-timing-function-ease-in-out | cubic-bezier(0.645, 0.045, 0.355, 1) | Acelera e desacelera gradualmente. Ideal para elementos que estão visíveis do início ao fim do movimento. | Expandir menu dropdown, toggle ou uma lista. |