Performnance Issue with Interactive Animation

[raven+crow]

Hi all. We've created an interactive animated infographic that's got some performance issues. It lives here:
https://lunchwithravenandcrow.com/images/ANM/LCfolder/ANM-LeadershipCycle.html

Essentially, clicks trigger 'go to and stop,' bringing users to one of 16 frames. All works as it should at first, but then the whole thing gets really sluggish the more you use it and eventually totally stops working.

New to Animate and wondering A) why that's happening, and B) how I can fix it. Pasting the existing code from one frame below too.

Thanks in advance, all!

code-

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.LtArrow.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('St3Rest');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.RtArrow.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('St2Rest');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.StabButton.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('1Stable');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.RelButton.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('1Rel');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.OverButton.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('1Over');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.FireButton.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('1Fire');
});

[kglad]

it's slow for me at the start.  each click takes more than 1 second to show a response.

upload your fla to a file server and post a link here.

[raven+crow]

here it is—
https://drive.google.com/file/d/1QraXNwrFmtq1WwQsLR7tk_9r-yOFJMzl/view?usp=drive_link

and thank you!

[kglad]

you're adding more and more listeners to the same object when you change frames.

[raven+crow]

Is there a better way to animate this so we don't get the accumulation of lag/listeners?

[kglad]

yes, all your code should be on one frame.  that will take more work than a partial fix that simply uses:

if(!this.framenamealreadyexecuted){

// all the code for this frame

this.framenamealreadyexecuted=true;

}

[raven+crow]

Sorry, not sure I understand (again, very new to Animate). How would that work since different buttons point to different frames? If I put all the code in, say, frame 1, then the animation points to frame 2, where there's no code, the buttons wouldn't work would they?

[kglad]

you could use if-statements conditional on the currentLabel.  if you do that, use only one listener for each buttons.  and you'll still use:

if(!this.alreadyExecuted){

this.alreadyExecuted=true;

// your code

}

[raven+crow]

Is there a way to do that with the code wizard? I'm not a coder and dependant on that tool in most cases. Or is there a good example of that in use in a similar way that I'd be using it that I could look at that you know of?

[kglad]

no, you can't use the code wizard for this.

just use the partial fix.  it might be good enough.

[raven+crow]

the partial fix being what you'd pasted, yes?

if(!this.framenamealreadyexecuted){

// all the code for this frame

this.framenamealreadyexecuted=true;

}

then would I just paste the entrieity of a frame's code where 'all the code form this frame' is? ie what I'd pasted in the original post like this?

if(!this.framenamealreadyexecuted){

//

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.LtArrow.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('St3Rest');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.RtArrow.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('St2Rest');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.StabButton.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('1Stable');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.RelButton.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('1Rel');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.OverButton.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('1Over');
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.FireButton.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop('1Fire');
});

this.framenamealreadyexecuted=true;

}

[kglad]

yes, but use the frame label name so each if-statement is different 

[raven+crow]

Oh, so
if(!St2Restalreadyexecuted){...
for example (where St2Rest is a frame name in the animation

[kglad]

yes, exactly.

use that same name assigned to true on that same frame

[raven+crow]

Great—I'll give that a go. Thanks for your help

[kglad]

sure. keep this updated.

[raven+crow]

re: your question as to whether this solved it for me @kglad I think I need to just change the way I'm animating it to make it simpler with fewer frames and more triggered movement. Rethinking it all now

[kglad]

ok.