Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bluisier

Callback function problem GSAP - Chart.js

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

See the Pen myKgaa by anon (@anon) on CodePen

Link to post
Share on other sites

Hello bluisier, and Welcome to the GreenSock Forum!

 

Have you tried passing your variables mydoughnutgraph1 and mydoughnutgraph2 in the GSAP call() params like this:
 

.call( callback:Function, params:Array, scope:*, position:* )

// could look like this with passing your variables into the call function
tween6.call(updatedoughnuts,[mydoughnutgraph1, mydoughnutgraph2]);

So your code could look like this:

var tween6 = new TimelineMax();

tween6.staggerTo(".doughnut", 2, {marginLeft:"0px", ease:Power4.easeOut});
// add your variables as parameters in call()
tween6.call(updatedoughnuts,[mydoughnutgraph1, mydoughnutgraph2]);
tween6.to(legend, 1, {opacity:1, alpha:1, ease:Quart.easeOut}, 2);

function updatedoughnuts(graph1,graph2) {
    graph1.segments[0].value = 120;
    graph1.segments[1].value = 30;
    graph1.update();
    graph2.segments[0].value = 80;
    graph2.segments[1].value = 70;
    graph2.update();
    alert("the function has been called");
};

:

Here are the Docs for call(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/call/

 

See if that helps! :)

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

Hi bluisier  :)

 

Seems you have some issues with Chart.js , not GSAP !

 

Timeline calls your updatedoughnuts() correctly , pls check the browser console :

 

See the Pen YPjKGg by anon (@anon) on CodePen

  • Like 1
Link to post
Share on other sites

hmm, like Diaco suggested it appears the issue is elsewhere.

 

Above you mentioned that   updatedoughnuts() works outside of TimelineMax.

I removed it from the timeline and called it on its own and it did not work.

 

I think the next step is that you provide a CodePen demo with the updateDoughnuts() working without TimelineMax and then we can try adding it to a timeline.

 

Thanks

  • Like 1
Link to post
Share on other sites

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:

See the Pen myKgaa by anon (@anon) on CodePen

) and called the function from outside of the timeline here (This one does not have the issue:

See the Pen JoBjzX by anon (@anon) on CodePen

). 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...

Link to post
Share on other sites

Hi bluisier

 

This is clearly a chart.js issue. For some reason it won't work when there is a delay. To prove this, I called your update function outside of GSAP, in a normal setTimeout function. 

// This will work sometimes
setTimeout(function() {
  updatedoughnuts();
});

// Add a little bit of time, and it won't work
setTimeout(function() {
  updatedoughnuts();
}, 100);
  • Like 2
Link to post
Share on other sites

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!

  • Like 1
Link to post
Share on other sites

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 ;)

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×