'Is there a way to animate when div is visible on viewport using animate.style

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 class="box animate__animated animate__fadeInLeft animate__delay-2s"><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 class="main">
  <div class="box animate__animated animate__fadeInLeft animate__delay-3s"><span>50 Years of Excellence and Beyond</span></div>
</div>
javascriptcssanimation


Solution 1:[1]

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.

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 first user
Solution 2 Learning

Related Questions