tailwindcss motion

✨ tailwindcss-motion β ✨

tailwindcss-motion é um plugin Tailwind CSS feito na RomboHQ. É uma biblioteca de animação simples, mas poderosa, com uma sintaxe simples.

Movimento, sem comoção.

⚒️ Instalação

1. Instale o pacote npm

npm i -D tailwindcss-motion

2. Adicione ao seu tailwind.config.js

 // tailwind.config.js

export default {
     content : [ ... ] ,
     theme : {
        extend : { ... } ,
     } ,
     plugins : [ require ( 'tailwindcss-motion' ) ] ,
} ;

ou, para usar ESM:

 import tailwindcssMotion from "tailwindcss-motion" ;

/** @type {import('tailwindcss').Config} */
export default {
     content : [ ... ] ,
     theme : {
          extend : { } ,
     } ,
     plugins : [ tailwindcssMotion ] ,
} ; 

Como funciona?

Fornecemos uma sintaxe simples para animar qualquer elemento em seu projeto Tailwind. Em vez de definir quadros-chave personalizados, fornecemos classes utilitárias para animar todas as dimensões, inline.

Por exemplo, para um efeito de slide e fade - você simplesmente precisa motion-translate-x-in-25 motion-opacity-in-0 ou pode usar uma de nossas predefinições com motion-preset-fade

Predefinições de movimento

Fornecemos uma coleção de predefinições para animar seus componentes facilmente:

• Fade : motion-preset-fade
• Deslizar :
  • Direita: motion-preset-slide-right
  • Esquerda: motion-preset-slide-left
  • Para cima: motion-preset-slide-up
  • Para baixo: motion-preset-slide-down
• Foco : motion-preset-focus
• Desfoque :
  • Direita: motion-preset-blur-right
  • Esquerda: motion-preset-blur-left
  • Para cima: motion-preset-blur-up
  • Para baixo: motion-preset-blur-down
• Bounce : motion-preset-bounce
• Expandir : motion-preset-expand
• Encolher : motion-preset-shrink
• Pop : motion-preset-pop
• Comprimir : motion-preset-compress
• Shake : motion-preset-shake
• Wiggle : motion-preset-wiggle
• Confete : motion-preset-confetti
• Máquina de escrever : motion-preset-typewriter-[number of characters]
• Flomoji : motion-preset-flomoji

Personalizando predefinições

Você pode personalizar ainda mais as predefinições usando animações básicas e classes modificadoras.

Por exemplo:

• Adicione um atraso ao motion-preset-fade :

 < div class =" motion-preset-fade motion-delay-500 " > </ div >

• Ajuste a duração do motion-preset-slide-right :

 < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >

• Aumente a altura do motion-preset-bounce :

 < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > 

Animações básicas

Além das predefinições, você pode criar suas próprias animações personalizadas combinando estas classes base:

• Fade In : motion-opacity-in-0
• Deslize para dentro :
  • Abaixo: motion-translate-y-in-100
  • Acima: -motion-translate-y-in-100
• Escala In : motion-scale-in-75
• Girar para dentro :
  • A partir de 180 graus: motion-rotate-in-180
  • De -90 graus: -motion-rotate-in-90
• Desfoque : motion-blur-in-sm
• Escala de cinza em : motion-grayscale-in
• Mudança de cor de fundo : motion-bg-in-red-500
• Mudança de cor do texto : motion-text-in-blue-500

Combinando animações

Você pode combinar várias animações em um único elemento:

 < div
  class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div >

Sair das animações

Para animações de saída, basta substituir in por out no nome da classe.

Modificadores

Você pode personalizar a duração, o atraso e a função de tempo de qualquer animação.

• Duração : motion-duration-500
• Atraso : motion-delay-500
• Função de temporização : motion-timing-spring-bouncy

Por exemplo:

 < div
  class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Isso aplica uma duração de 2.000 ms às animações de rotação e opacidade.

Modificadores para cada propriedade

Você pode aplicar modificadores a propriedades específicas usando uma barra / .

Por exemplo:

 < div
  class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Aqui, o atraso de 500ms é aplicado apenas à rotação, não à opacidade.

Funções de facilidade

O plugin inclui funções de tempo personalizadas:

alguns exemplos são:

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

Exemplos

Página inicial - https://play.tailwindcss.com/uAuVF8F1vC

Diálogo de bate-papo - https://play.tailwindcss.com/gjGqEKswjQ

Ilha dinâmica de bateria fraca - https://play.tailwindcss.com/tvYFbHtNNQ

Amostras de cores da Apple - https://play.tailwindcss.com/cvQ3Nk3v8j

O que é Rombo?

A Rombo é uma empresa em estágio inicial, que desenvolve ferramentas para ajudar as empresas a construir belas interfaces interativas. Estamos começando com um kit de ferramentas para engenheiros, designers e profissionais de marketing criativos animarem nativamente dentro de fluxos de trabalho comuns - como Tailwind, Figma, Webflow, Shopify e muito mais por vir! Inscreva-se para receber atualizações em nosso site em https://rombo.co