Trigger an HTML5 animation on scroll in a slider?

Hi folks, Is it possible to set an embedded html5 animation so that it starts the animation only when it slides into viewing position within a slider? I have a few animated banner ad samples in a portfolio slider… they seem to start their animated sequences when the slider loads, which means they’re somewhere in the middle of a sequence once a user cycles through the slides ahead of them.

Alternatively, if I could make the div they’re in clickable to start their animations, that would work too. I could add a “click or tap to start” instruction to the captions.

Here is the read-only link to my project:
https://preview.webflow.com/preview/fixed-dvedesign-net-4ef59fe4d2d8221bd46?utm_medium=preview_link&utm_source=designer&utm_content=fixed-dvedesign-net-4ef59fe4d2d8221bd46&preview=d309d032b4fccbb8281feaca62c6bf89&mode=preview