Chart JS deferred load on scroll into view (DONUTS)

Hey all

I’ve setup these animated donut charts using Chart.JS. Because my client is wanting to update the charts/data themselves, I’ve set them all up as collection items. It’s working pretty nice! https://donuthelp.webflow.io/

Only trouble is they animate in on page load, but I want them to animate in as the user scrolls to them (preferably one by one).

I understand this can be done using the Chart.JS Deferred plugin https://chartjs-plugin-deferred.netlify.app/ - but I haven’t been able to get that working given my limited JS abilities.
I think it’s probably because they’re Iframe embeds, so the “scroll into view” isn’t being detected on the page.

Anyone have any pointers? Thank you!

Happy to share clone-able version with Webflow community.

Read-Only link
https://preview.webflow.com/preview/donuthelp?utm_medium=preview_link&utm_source=designer&utm_content=donuthelp&preview=010adb9532d12e37007589d512d88c16&mode=preview

Published link
https://donuthelp.webflow.io/