Jump to content
Search Community

onstart "Maximum call stack size exceeded" error

split19 test
Moderator Tag

Go to solution Solved by split19,

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

hi guys
 
i have a TimelineMax timeline set up, tweening a spritesheet with about 300 frames. it's working great, tweening from 1 label to another. but when i add an onStart param:
tl.tweenFromTo("region1", "region2", { onStart: clearMarkers }).duration(0.75);

i get this error:

Uncaught RangeError: Maximum call stack size exceeded
    at Object.g.onStart (tweenmax_1.18.5_23b0de6…_min.js:14)
    at Object.g._callback (tweenmax_1.18.5_23b0de6…_min.js:16)
    at Object.g.onStart (tweenmax_1.18.5_23b0de6…_min.js:14)
    at Object.g._callback (tweenmax_1.18.5_23b0de6…_min.js:16)
    at Object.g.onStart (tweenmax_1.18.5_23b0de6…_min.js:14)
    at Object.g._callback (tweenmax_1.18.5_23b0de6…_min.js:16)
    at Object.g.onStart (tweenmax_1.18.5_23b0de6…_min.js:14)
    at Object.g._callback (tweenmax_1.18.5_23b0de6…_min.js:16)
    at Object.g.onStart (tweenmax_1.18.5_23b0de6…_min.js:14)
    at Object.g._callback (tweenmax_1.18.5_23b0de6…_min.js:16)

i'm guessing the 300 frames has something to do with it, but i would think that this tweenFromTo() would only be called once and should be ok. any ideas why this is happening and how i can fix it?

 

thanks!

 
 
 
 
Link to comment
Share on other sites

Hello split19 and Welcome to the GreenSock Forum!

  • What browser and browser version you seeing this in?
  • What OS and OS version you seeing this in?

Could you please make a limited codepen to make sure we can see all of your code in context.

 

 

Also make sure you are using the latest version 1.9.0 of TweenMax.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js

Thanks :)

  • Like 1
Link to comment
Share on other sites

hmmmm... I'm confused by this myself.

 

I've recreated the behavior you're seeing in this pen:

 

See the Pen 3d2e405f888df24587e8d197a9fd1a1e by PointC (@PointC) on CodePen

 

I don't think I've used an onStart in the vars of a tweenFromTo, but I've used an onComplete and delay with no problems. If you switch my demo to an onComplete, it all works fine, but that onStart is causing trouble. 

 

Unless Jonathan has some more ideas, we may have to kick this one upstairs to Professor Carl or Master Jack.

Link to comment
Share on other sites

Thanks, Craig, 

I just got done with my own reduced case. Definitely something we need to look into.

 

Split1, nothing wrong with your code.

While we look into please try adding a callback to your timeline at a time of 0 like this:

 

var autoplay_tl = new TimelineMax();
    autoplay_tl.add(clearMarkers, 0)
    autoplay_tl.add( window.tl.tweenFromTo("region1", "region2", { ease: Power1.easeInOut }).duration(0.75) );
    autoplay_tl.add( window.tl.tweenFromTo("region2", "region3", { ease: Power1.easeInOut, delay: 1}).duration(0.75) );
    autoplay_tl.add( window.tl.tweenFromTo("region3", "region4", { ease: Power1.easeInOut, delay: 1}).duration(0.75) );
...
 
I think that should give you the results you need in the meantime.
 
Sorry for the confustion. Thanks for bringing this to our attention.
  • Like 1
Link to comment
Share on other sites

  • Solution

Thanks everyone! I really appreciate it. i changed the library URL to the 1.19.1 URL and it works.

 

when the globe stops on a region, i'm dropping some markers on some cities (not shown in my pen). so since i need to do clearMarkers() at the start of every tweenFromTo() when the globe starts animating again, i added this after each tween, to simulate onStart:

autoplay_tl.add(clearMarkers, "-=0.75"); 

seems to be a good workaround for now:

    autoplay_tl.add(window.tl.tweenFromTo("region1", "region2", { ease: Power1.easeInOut, onComplete: dropMarkers, onCompleteParams: [markers_region2_mc] }).duration(0.75));
    autoplay_tl.add(clearMarkers, "-=0.75");
    autoplay_tl.add(window.tl.tweenFromTo("region2", "region3", { ease: Power1.easeInOut, onComplete: dropMarkers, onCompleteParams: [markers_region3_mc], delay: 2}).duration(0.75));
    autoplay_tl.add(clearMarkers, "-=0.75");   
    autoplay_tl.add(window.tl.tweenFromTo("region3", "region4", { ease: Power1.easeInOut, delay: 2}).duration(0.75));
    autoplay_tl.add(clearMarkers, "-=0.75");
    autoplay_tl.add(window.tl.tweenFromTo("region4", "region1b", { ease: Power1.easeInOut, delay: 2, onComplete: function () { window.tl.seek("region1"); console.log("reset"); } }).duration(2));
    autoplay_tl.add(clearMarkers, "-=0.75");
    autoplay_tl.add(window.tl.tweenFromTo("region1", "region2", { ease: Power1.easeInOut, delay: 2 }).duration(0.75));

Jack - a related question: when you release v 1.19.1, will it get updated on Google's CDN, listed here? my code is part of a banner that will be served by DoubleClick.

 

thank you!

  • Like 1
Link to comment
Share on other sites

Yep, your solution seems entirely reasonable. 

 

As for 1.19.1 being updated on Google's CDN, I'm not exactly sure when they'll do that. I hope to release 1.19.1 within the next week or two, but sometimes these big companies take a while to get around to pushing updates to their CDNs. We can certainly let them know about the update (and we'd encourage their customers like you to do so as well to make sure they see how much demand there is). Google is usually pretty good about doing it within a few weeks or a month. 

 

Again, sorry about the hassle. 

Link to comment
Share on other sites

  • 3 years later...

This error is almost always means you have a problem with recursion in JavaScript code, as there isn't any other way in JavaScript to consume lots of stack. Sometimes calling a recursive function over and over again, causes the browser to send you Maximum call stack size exceeded error message as the memory that can be allocated for your use is not unlimited.
 
 Be considerate while calling functions , also dry run is the best practice to prevent them. It's possible to cause infinite recursion in a fully promisified code, too. That can happen if the promises in a chain don't actually perform any asynchronous execution , in which case control never really returns to the event loop, even though the code otherwise appears to be asynchronous. That's when it's useful to wrap your recursive function call into a -

 

  • setTimeout
  • setImmediate or
  • process.nextTick

 

In some programming languages this can be solved with tail call optimization, where the recursion call is transformed under the hood into a loop so no maximum stack size reached error exists. 

 

Link to comment
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.
×
×
  • Create New...