How to make wow fadeInUp work with overflow: scroll - html

Question

I have a little problem when i try to add wow fadeInUp (https://wowjs.uk/docs) animation on my website. I have
overflow set to scroll in my css and it seems to disable the effects of the animation. There is a reason why i had it on scroll so i was wondering if there is a way to make it work with overflow: scroll;
Here is the website for more details: https://admiring-khorana-ad08d5.netlify.app/
.webContainer{
max-height: 100vh;
overflow: scroll;
}
<div class="webContainer">
<div class="grid-container">
<div class="grid-item text wow fadeInUp" data-wow-duration="3s"><img class="services-icon img" src="./icons/services/s1.png" alt=""> <a
class="servicesTag" href="">Acupuncture</a><br>
<div class="serv-description">
Cette pratique constitue tout acte de stimulation, généralement au
moyen d’aiguilles, de certains sites déterminés sur la peau.
</div>
</div>
<div class="grid-item text wow fadeInUp" data-wow-duration="3s"> <img class="services-icon img" src="./icons/services/s2.png" alt=""> <a
class="servicesTag" href="">Kinésiologie</a><br>
<div class="serv-description">
Le kinésiologue est le professionnel de la santé expert en activité
physique. Il vous accompagne dans l’adoption et le maintien d’un
style de vie sain et actif. Ce professionnel peut aussi vous aider à
perdre du poids. Les programmes d’entraînement conçus par les
kinésiologues peuvent aussi aider les personnes souffrant de
problèmes chroniques.
</div>
</div>
...
var wow = new WOW();
wow.init();

Answer 1

I'm not really sure of what you are talking about but you can use #keyframes fadeIn to make animations. Example:
p:hover {
animation: fadeIn 3.1s;
}
#keyframes fadeIn {
from{opacity: 0;}
to{opacity: 1;}
}
<div>
<p>Hello</p>
</div>
Does that answer your question

Answer 2

Solved it by using Jquery
if (scrolled > 25 && scrolled < 50) {
jQuery('.grid-item, .services-image').each(function(i) {
setTimeout(()=>{
$(this).show().addClass('animated fadeInUp')
}, 250 * i);
});