1

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>
Learning
  • 19,469
  • 39
  • 180
  • 373
  • https://stackoverflow.com/questions/1462138/event-listener-for-when-element-becomes-visible maybe this is the answer you are looking for? – Diego D May 06 '22 at 06:58
  • I want to do it without using any JS i was looking for any built in feature in the animation library to achieve this – Learning May 06 '22 at 06:59
  • @Yogi, I want animation to start when animated div is in viewport. In CP example animated div with class .box starts animation even if its not in viewport.. I just made change to question so that it more clear. Can you share your example where animation starts only when div is in viewport. in my case it starts irrespective of view being in viewport area or not – Learning May 06 '22 at 09:32
  • Sorry, after more testing I see that you are correct. The animation starts on load even when the element is scrolled out of view. I don't see a way to solve this problem without using js. – Yogi May 06 '22 at 11:47

2 Answers2

0

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.

Learning
  • 19,469
  • 39
  • 180
  • 373
-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.

first
  • 616
  • 1
  • 7
  • 13
  • I want to avoid JS but i am not sure there is anyother solution without use of JS i can use some library to see when div is visible in viewport and then add animation class to div. – Learning May 06 '22 at 07:33
  • may be this could help. The guy uses advance css properties to achieve animate on scroll without any js. – first May 06 '22 at 07:49
  • This one i had seen few months back but its not supported on all browsers – Learning May 06 '22 at 09:38