Need animation repeat on scrolling from Bottom to top with Wow Library in GHL

Question

I have used the Wow library and Animate.css to implement animation effects on my GHL website, and it works properly while scrolling from top to bottom. Now, I need to repeat the same animation when scrolling from bottom to top.

The animation works based on the class (wow) and the animate property specifying the required element's custom class.

 <script>
  l=document.createElement('link');
  l.rel='stylesheet';
  l.href='//cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css';
  s=document.createElement('script');
  s.src='//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js';
  document.head.appendChild(s);
  document.head.appendChild(l);
  
  watch4WOW=setInterval(function(){
    if(typeof WOW =='function'){
     clearInterval(watch4WOW);
      new WOW().init();
    }
  });
</script>
   

Note: I want to implement this feature on GHL using custom code given above.

I tried some queries with the help of ChatGPT, but it's not working as expected, and there is a delay in loading the animation.

If it's not possible using the Wow library, please provide suggestions on how to implement this feature in another way.