Estoy tratando de activar las animaciones CSS de mi página solo en la ventana gráfica del usuario. Lo que significa que la animación comenzará solo una vez que el elemento sea visible. Para eso decidí usar Intersection Observer pero solo agrega mi clase al primer elemento con ese nombre de clase, en lugar de todos ellos.

JS: .animate__animated tiene la propiedad 'animation-play-state: paused' de forma predeterminada, y si la clase está visible, agrega la clase 'is-running' que contiene 'animation-play-state:running'. Funciona muy bien con el primer elemento, pero no con el segundo (y otros en mi página).

¿Cómo puedo pasar todas las instancias de esa clase a las entradas? ¿Puedo incluso hacer eso con el Intersection Observer? Soy nuevo en JS, principalmente sigo tutoriales en línea y parece que no puedo encontrar una solución.

 const observer = new IntersectionObserver(entries => { // Loop over the entries entries.forEach(entry => { // If the element is visible if (entry.isIntersecting) { // Set to animation-play-state: running entry.target.classList.add('is-running'); } }); }); observer.observe(document.querySelector('.animate__animated'));

CSS:

 .animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-play-state: paused; } .is-running { animation-play-state: running; }

HTML:

 <nav class="navbar has-text-white has-shadow" style="background:#231f20; max-height:80px;"> <div class="navbar-brand"> <a href="index.html" class="narvbar-item pl-2"> <img src="img/logo-txt.png" alt="Cheff Burgers Logo" class="pt-4 pl-5 animate__animated animate__lightSpeedInLeft" > </a> <a class="navbar-burger has-text-white" id="burger"> <span></span> <span></span> <span></span> </a> </div> <div class="navbar-menu pb-5" id="nav-links" style="background-color:#231f20;"> <div class="navbar-end pr-6 mr-6 mt-5 animate__animated anim1 animate__lightSpeedInRight"> <a href="index.html" class="navbar-item has-text-white">Accueil</a> <a href="menu.html" class="navbar-item has-text-white">Menu</a> <a href="evenements.html" class="navbar-item has-text-white">Evènements</a> <a href="contact.html" class="navbar-item has-text-white">Horaires & Contact</a> </div> </div> </nav>