Se você, assim como eu, gosta de animações e está querendo uma animação de entrada com o efeito de máquina de escrever simples, bonita e eficiente sem a necessidade de instalar uma lib externa para isso, você veio ao lugar certo!
Recentemente eu estava desenvolvendo um projeto e tive a ideia de fazer tal efeito, porém, pesquisando um pouco, percebi que a grande maioria dos tutoriais utilizam uma lib de terceiros para construir esse efeito, e eu não estava nem um pouco a fim de instalar uma lib em meu projeto simplesmente para fazer essa animação.
Então, resolvi colocar a mão na massa e desenvolver um componente capaz de produzir esse efeito.
E foi um desafio, pois a maneira como o React interage com o DOM é diferente, mas no final eu obtive o seguinte resultado:
Pré-requisitos
A princípio, para que você consiga prosseguir e alcançar o mesmo resultado apresentado acima, você precisa ter um projeto React ou Next e configurar o Tailwind CSS em seu projeto.
O Tailwind não é obrigatório, você pode fazer tudo com CSS puro. Porém, eu estou usando Tailwind neste exemplo, ok?
Depois que você configurou o seu projeto, vamos desenvolver nosso componente. Para isso, crie um componente com o nome “maquinaDeEscrever” ou algum outro nome do seu agrado:
No meu caso, eu criei a pasta components e dentro dela o arquivo “MaquinaDeEscrever“. Depois que você criar, exporte uma função com o mesmo nome:
A função
Este componente só tem um estado, e ela retorna o valor desse estado.
Agora nós temos que, de alguma forma, fazer esse componente escrever o valor do estado na tela simulando uma máquina de escrever. Vamos nessa?
Olhando o código acima, nós só criamos uma função chamada “escreverNaTela” e a única coisa que essa função faz é alterar o estado do componente, sempre adicionando uma letra após a outra, com um conceito, chamado de recurção (eu não vou entrar em detalhes desse conceito, pois ele não é o foco do artigo, certo?).
Outra coisa importante que esse componente está fazendo é chamando a função dentro de um useEffect. Mas o que isso quer dizer? Bom, isso significa que essa função vai ser chamada logo depois que o DOM (Document Object Model) for carregado.
Usando o componente
A partir de agora, nós já podemos usar o nosso componente em qualquer parte da nossa aplicação.
Vamos fazer um teste inicial?
Eu vou utilizar esse componente no meu arquivo index.jsx. Você pode chamá-lo em qualquer parte da sua aplicação/árvore de componentes.
Como pode ver, o meu index só tem estilos feitos com o Tailwind CSS e a chamada ao nosso componente. Não esqueça do importe, ok?
Depois, nós só precisamos passar o texto via props para que o efeito seja aplicado, e já podemos conferir o resultado em nosso browser:
Nós já temos um resultado aceitável, concorda? No entanto, ainda está diferente do resultado proposto no início do artigo.
Então, vamos voltar pro código e finalizar nosso componente.
Vamos entender o que mudou aqui.
A princípio, nós definimos um novo estado, que define quando o cursor dever ser exibido ou não, e a gente muda esse estado de acordo com a nossa preferência.
Também temos uma nova propriedade chamada “delay”. Essa props seta um abraso, entre uma frase e outra.
Nós vamos entender isso mais adiante.
Animando o cursor
Logo após o return da função dentro da div, nós temos um span que representa nosso cursor e ele contém uma animação bem simples, porém, para que ela funcione no Tailwind CSS, nós precisamos definir essa animação em nosso arquivo tailwind.config.js, mais especificamente dentro de extend:
E agora, finalmente podemos visualizar o resultado do nosso componente.
Da mesma forma como antes, precisamos passar as props, para o componente:
Por fim, instanciamos três componentes “MaquinaDeEscrever” cada um com frases diferentes e com diferentes delays.
Como resultado teremos em nosso navegador o seguinte efeito:
Conclusão
Se você chegou até aqui, agora você poderá criar a sua própria versão melhorada desse projeto. Você pode ver o código completo no github.
Muito obrigado por chegar até aqui, um abraço e até a próxima!
