Gsap scrolltrigger with chartJS

[Volt 22]

Hello everyone,

I want to draw a doughnut chart with ChartJS on a scroll as is in the example above. 
But the chart doesn't turn out smoothly, and I can't seem to undraw the chart on scroll back.

 

Thank you.

See the Pen KKJWgLJ by Iam_Jesse (@Iam_Jesse) on CodePen

[GreenSock]

Yeah, that code is extremely inefficient, so I'm not surprised you're seeing performance issues. You're doing a ton of looping and extra work on every single update, plus it looks like ChartJS has its own animation engine (not using GSAP). This actually isn't a GSAP question at all - it looks to me like it's all about ChartJS, right? 

 

I'd probably take a very different approach to the logic. If your goal is to jump between states of chart data, split evenly across the progress of the ScrollTrigger, then create a copy of the chart data that has ALL of the data in it. Then only sense when you've progressed enough to CHANGE the data, you can slice() the necessary data out of the full copy, dump that into the chart's one, and update() it. Just an idea. The key is to only do the processing when absolutely necessary. 

 

If you've got any GSAP-specific questions, let us know. Good luck! 👍

[Volt 22]

Thank you for your response, Jack.

I followed your suggestion and it was much better. However, it still wasn't very smooth as chart JS uses a different animation engine like you said.

So, I used another method, made an SVG and used drawSVG to animate it.

Thank you.