Initiate iframe canvas animation on scroll

I created an SVG illustration in Ilustrator and imported it in Animate. Once I animated it, I tried exporting my illustration animation as a .gif, but no matter how I do it there's way too much pixelation since there's no anti-aliasing. Testing the dithering options hasn't been any help, so I exported it as an HTML canvas for use in an iframe.

Now the animation needs to activate on scroll (when it enters the viewport) rather than on load. I'd love some help writing JavaScript to get this running, and I'll post the working code if I figure it out. Thank you!