bluisier

Hey OSUblake, Thanks a lot for your help! I did not think to try that... Even though it is not clear why we have to create the chart inside the function to make it work, I managed to get the effect I wanted for my project. By the way, I just paste a link that might be useful for other people combining GSAP and Chart.js... You might have the same issue Thanks again guys

Hi OSUblake, Thanks for your answer. You're completly right and I guess this closes the topic here... I'll have to go on chart.js side to find a solution, even if I doubt they have such a nice forum and community that you have here with GSAP. Thanks again!

Thanks everybody for your help. To make things more clear and as Carl suggested, I forked the CodePen I first provided (The one that has the issue: http://codepen.io/anon/pen/myKgaa) and called the function from outside of the timeline here (This one does not have the issue: http://codepen.io/anon/pen/JoBjzX). You can see that in the second Codepen, the values of my charts are updated and not in the first one. Maybe I just miss some obvious stuff but unfortunatly I cannot figure it out...

Hi Jonathan, Thanks for taking some time to look at my issue. Actually I did not try that before but unfortunatly, after doing the changes you suggested, I still have the same behaviour... And I still have absolutly no clue about what could cause the problem. The thing that bother me the most is that actually the function does not update the charts only when she is called inside the TimelineMax... It works well if called normally

First of all, I would like to thank you for the amazing work you're doing with GSAP... it really is an awesome tool and and I really love to work with it Well, I'm combining GSAP and chart.js library to do some animated charts for an online CV and yesterday I ran into a strange issue. I'm usually bringing empty charts (with values of 0) in the screen using timelinemax and then updating the charts value with a callback function (in this case the function updatedoughnuts()) to have a nice animation effect on my charts. var tween6 = new TimelineMax(); tween6.staggerTo(".doughnut", 2, {marginLeft:"0px", ease:Power4.easeOut}); tween6.call(updatedoughnuts); tween6.to(legend, 1, {opacity:1, alpha:1, ease:Quart.easeOut}, 2); function updatedoughnuts() { mydoughnutgraph1.segments[0].value = 120; mydoughnutgraph1.segments[1].value = 30; mydoughnutgraph1.update(); mydoughnutgraph2.segments[0].value = 80; mydoughnutgraph2.segments[1].value = 70; mydoughnutgraph2.update(); alert("the function has been called"); }; The weird thing is that the function is called (I have the alert box) but my doughnut graphs are not updated. But even stranger is that if I remove the callback inside the timeline and call the function outside of it, then it works like a charm (see the codepen that reproduce the error): var tween6 = new TimelineMax(); tween6.staggerTo(".doughnut", 2, {marginLeft:"0px", ease:Power4.easeOut}); tween6.to(legend, 1, {opacity:1, alpha:1, ease:Quart.easeOut}, 2); updatedoughnuts(); I really don't understand this behaviour... I tried different callback with onComplete in the staggerTo or using a delayedCall but I always get the same behaviour. I also used the same method with other types of chart and I had no problem to update the charts values with a callback... Or maybe I just miss somth completly obvious I really hope you guys can help me on this one. Thanks in advance