I want to animate div only when div is visible on viewport using https://animate.style/

At this point it animates div even when its not in viewport which is normal behavior of animation library i am using, but i want animation to start when div with class .box is in viewport . I added delay but that is not practical as i am not sure when user will scroll to that part of webpage which needs to be animate

<div ><span>50 Years of Excellence and Beyond</span></div>

Is there a way i can start animate only when div is in viewport as i don't want to use 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 >
  <div ><span>50 Years of Excellence and Beyond</span></div>
</div>

CodePudding user response：

animate.style

is a css animation library not animate on scroll library. If you want to animate on scroll you should use something like AOS or scrollmagic or lax.js and there are plenty of other available in javascript and jquery.

CodePudding user response：

As i am not able to find a solution without JS so i ended up using following code to achive same using JS.

This code adds & Removes animation class when element is in viewport

$(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");
                   }
               });
 });

I will leave this question open just in case someone suggest a better light weight solution.