Animação Simples Usando o Observador de Interseção

Você tem sua animação em seu site, mas o problema é que, no momento em que você rola para essa seção, sua animação está pronta. Claro que você quer que o usuário veja sua animação, então como você vai atrasar a animação até que ela esteja visível na viewport?

Neste artigo, mostrarei uma maneira de fazer isso usando a API Intersection Observer.

Eu criei um elemento div com um nome de classe "demo".

<div class="demo"><div>
 

.demo{
  width: 100vw;
  height: 200px;
  background: orange;
  top: 100vh;
  left: 0vw;
  position: relative;
} 

@keyframes left-right 
{
  0% {left: -90vw;}j
  100% {left: 0px;}

.left-right 
{
 animation-name: left-right;
 animation-duration: 2s;
 animation-iteration-count: 1;
}

// create observer
const observer = new IntersectionObserver(entries => {
  // Loop over the entries(even if we only asks one element to observe)
   entries.forEach(entry => {
   
      // If the element is visible
    if (entry.isIntersecting) {
      entry.target.classList.add('left-right');
	  return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
   entry.target.classList.remove('left-right');
  });
});

//tell observer to track the element
observer.observe(document.querySelector('.demo'))

O “entry.target.classList.remove('esquerda-direita');” remove a classe animação .left-right sempre que o elemento div não estiver visível na tela. Lembre-se de que em nossas configurações de animação em 0% definimos -90vh para que possamos ter 10vh visíveis? A razão para isso é que a função javascript ainda verá o elemento div e a classe .left-right não será removida enquanto a animação estiver em andamento. Se a classe .left-right da animação tornar o elemento invisível na tela em algum momento, ela fornecerá um resultado diferente quando a função for chamada. O script js não o verá na tela, portanto, removerá a classe e, em seguida, o elemento div terá sua posição original de volta, à esquerda: 0vh que está visível, a seguir chamará a função novamente e adicionará a animação. E então ficará invisível novamente devido à posição inicial da animação. A classe será removida e adicionada várias vezes, você não verá o processo de animação como espera. Você pode remover a linha “entry.target.classList.remove('left-right');” se você quiser que a animação seja executada apenas uma vez, tudo bem se a classe com sua animação em algum momento tornar o elemento invisível.

Esta é apenas uma forma de base de animação na posição/visibilidade. Ter animação em seu site atrai e faz com que os espectadores fiquem mais tempo.