Streaming live at 10am (PST)

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/