Durante a criação de uma landing page em um projeto freelancer que estou desenvolvendo, decidi colocar algumas animações no site, para prover à quem acessar a página uma interação mais agradável do que simplesmente exibir o conteúdo das sessões de forma bruta. Com essa ideia em mente, comecei a pensar em formas de criar essas animações primeiramente em CSS. Estudei sobre keyframes, transition, transform e cheguei em um resultado que não me agradou, pois eu queria que as animações acontecessem ao chegar em uma determinada sessão.

Ao fazer uma pesquisa sobre ferramentas que me fornecessem o resultado que em queria, cheguei na ferramenta que é título deste artigo, o scrollReveal. Assim que entrei no site de apresentação da biblioteca, vi que era exatamente o que eu queria. Uma forma de exibir conteudos na página, de forma independente, assim que eu chegasse na sessão específica.

Me surpreendi com a facilidade de usar os recursos do ScrollReveal, é possível adicionar a biblioteca a partir do gerenciador de pacotes npm ou simplesmente referenciando o arquivo da biblioteca nos scripts do seu projeto.

npm install scrollreveal --save
ou
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>

No código javascript do projeto, ao atribuir uma constante ao ScrollReveal conforme mostrado abaixo. Pode-se definir como chave e valor, os atributos que deseja ter por padrão na animação, no meu exemplo, estou colocando somente o reset como true, com isso, ao passar na sessão, após ela sair do campo de tela, ela fará a animação novamente.

const sr = ScrollReveal({reset: true})

Agora, para cada item que eu quiser animar, eu passo a minha constante chamando a função reveal, passando por parâmetro o que eu quero colocar a animação identificando, seja como id, classe, tag, etc. E passando as animações que eu quero que aquele bloco execute, também como chave e valor.

sr.reveal(".toDown", {
    origin: "top", //Para ele surgir de cima para baixo.
    distance: "50px", // A distancia do origin para a posição original do elemento.
    duration: 2000, // A duração da animação em ms
    delay: 300, // O delay para a animação acontecer
    reset: false // Ao sair do campo de tela, a animação não acontecerá novamente caso eu passe por ela novamente.
  });

No exemplo acima, estou animando uma div que tem uma classe chamada “toDown”, passando como alguns parâmetros que estão detalhados. Há outros, como o rotate, viewFactor, easing, interval, entre outros.

Com essa ferramenta sensacional e bastante fácil e intuitiva de usar, eu consegui executar tudo o que eu tinha pensado para o projeto e surpreender positivamente o meu cliente e as pessoas que usarão o seu site.

Aqui embaixo estão a página da biblioteca, o seu repositório no github e um exemplo no codepen para ver o funcionamento e testar o que essa ferramenta pode fazer.

Documentação
Repositório da biblioteca
Codepen para teste