Quiero animar div solo cuando div esté visible en la ventana gráfica usando https://animate.style/
En este punto, anima div incluso cuando no está en la ventana gráfica, que es el comportamiento normal de la biblioteca de animación que estoy usando, pero quiero que la animación comience cuando div con class .box está en la ventana gráfica. Agregué retraso, pero eso no es práctico, ya que no estoy seguro de cuándo el usuario se desplazará a esa parte de la página web que debe animarse.
<div class="box animate__animated animate__fadeInLeft animate__delay-2s"><span>50 Years of Excellence and Beyond</span></div>¿Hay alguna manera de que pueda comenzar a animar solo cuando div está en la ventana gráfica ya que no quiero usar JS?
Codepen: https://codepen.io/KGuide/pen/MWQaQWm
.main{width:800px; height:250vh; background:blue; display:flex; align-items: flex-start; margin:auto auto;} .box {width:300px; height:300px; bottom::0; background:red; align-self: center;} <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/> <div class="main"> <div class="box animate__animated animate__fadeInLeft animate__delay-3s"><span>50 Years of Excellence and Beyond</span></div> </div>es una biblioteca de animación css que no se anima en la biblioteca de desplazamiento. Si desea animar en el desplazamiento, debe usar algo como AOS o scrollmagic o lax.js y hay muchos otros disponibles en javascript y jquery.
Como no puedo encontrar una solución sin JS, terminé usando el siguiente código para lograr lo mismo usando JS.
Este código agrega y elimina la clase de animación cuando el elemento está en la ventana gráfica
$(document).ready(function () { //code to check if element is visible in viewport $.fn.isOnScreen = function () { var win = $(window); var viewport = { top: win.scrollTop(), left: win.scrollLeft() }; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right = bounds.left + this.outerWidth(); bounds.bottom = bounds.top + this.outerHeight(); return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); }; $(window).scroll(function () { if ($('.box').isOnScreen()) { $(".box").addClass("animate__animated animate__fadeInLeft"); } else { $(".box").removeClass("animate__animated animate__fadeInLeft").addClass("box"); } }); });Dejaré esta pregunta abierta en caso de que alguien sugiera una mejor solución de peso ligero.