Animación simple usando Intersection Observer

Tiene su animación en su sitio web, pero el problema es que en el momento en que se desplaza a esa sección, su animación está lista. Por supuesto, desea que el usuario vea su animación, entonces, ¿cómo va a retrasar la animación hasta que sea visible para la ventana gráfica?

En este artículo, le mostraré una forma de hacerlo utilizando la API Intersection Observer.

Creé un elemento div con un nombre de clase "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'))

La “entrada.objetivo.classList.remove('izquierda-derecha');” línea elimine la clase de animación .left-right cada vez que el elemento div no esté visible en la pantalla. ¿Recuerda que en nuestra configuración de animación al 0% configuramos -90vh para que podamos tener 10vh visibles? La razón de esto es que la función javascript aún verá el elemento div y la clase .left-right no se eliminará mientras la animación está en proceso. Si la clase animation .left-right hace que el elemento no sea visible en la pantalla en algún momento, le dará un resultado diferente cuando se llame a la función. El script js no lo verá en la pantalla, por lo tanto, eliminará la clase y luego el elemento div volverá a su posición original, a la izquierda: 0vh, que es visible, luego llamará a la función nuevamente y agregará la animación. Y luego volverá a ser invisible debido a la posición inicial de la animación. La clase se eliminará y agregará una y otra vez; no verá el proceso de animación como esperaba. Puede eliminar la línea "entry.target.classList.remove('left-right');" si desea que la animación solo se ejecute una vez, estará bien si la clase con su animación en algún momento hace que el elemento no sea visible.

Esta es solo una forma de animación basada en la posición/visibilidad. Tener animación en su sitio web atrae y hace que los espectadores permanezcan más tiempo.