Issue with slider controlling animation groups

I apologize in advance for polluting the forum with my total rookie knowledge.
The code in my playground is a cut and paste disaster. So please try to have your blindfolds on regarding that. I’m trying to learn and have a pretty special way of learning. With that said…
I have run into a problem I simply can not solve.

I’m trying to create a gui slider that can control the animation progress and also act as a visual progress bar. My imported .glb contains 7 animations, and I want the slider to show the progress of the currently playing animation, which I choose from the right most gui triggers.

At first I tried to create a stackpanel for each animation. I put a stackpanel inside the function for each animation. This worked, apart from that the new slider placed/stacked itself on top of the previous stackpanel. I tried to dispose the previous child from the stack without any luck.

I then changed to a gui grid with the hopes that the sliders would not stack on top of each other, or at least that it would be easier to remove the old slider with an if statement. But once again my lacking knowledge really got in the way. I don’t understand how to reach variables etc. from “inside” a function from outside the function…

(Edit: In the included Playground I was aiming for using the slider (lines 256-298) function/section only once. And then tried to find a way to make the function fetch the currently playing animation from the Play button trigger functions)

So here I am, out of ideas on how to achieve this in a simple way. I’m certain that I have at least been somewhat close. But coding is very unforgiving, so being close does not help :wink:
Any kind soul out there who could possibly help a rookie like me?

Cube with slider | Babylon.js Playground (

@carolhmj can you have a look at this one ? if not I ll do a bit later tonight :slight_smile:

1 Like

If you want to modify a variable defined inside a function from outside of it, you’ll have to return it. Another option would be to define this variable as global. I recommend reading up on scope to understand the mechanics behind this: Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN (

Thanks for reaching out and for the guidance. I have now figured out how to at least lift out the variables I think I need to global space (Panel0 - Panel13). I see that I get the anticipated result with the console.log function. But that didn’t really help me since I still do not know how to remove/dispose the previous object from a GUI stackpanel or GUI grid.

I was able to use panel0.isVisible = false; and panel1.isVisible = false; (line 155-156) for example to hide the slider and header. But only on one animation at a time, not by piggy backing on the playButton0.onPointerClickObservable.add (function () {}. The remaining 6 sliders becames invisible and I can not seem to understand why.

Cube with slider | Babylon.js Playground (

What do you mean by “previous object” in this context? Do you mean another GUI control?

I’m trying to achieve so that there is one slider per animation, and only that one slider should show at a time. Not stacking on top of eachother like they do now. I would like to connect the slider to the onpointerClick of each animations trigger somehow. And the previously showing slider should always dissapear and be replaced with the new slider belonging to the new animation that I trigger from the right most buttons.

I hope I explain it clearly enough.

If you only want one slider on the scene, it would be simpler (and more performant) to create just one slider object and change its properties depending on the currently playing animation. Something like this example: Anims slider | Babylon.js Playground (

1 Like

Thank you, thank you, thank you! It seems so easy when you see the results of someone who knows what they are doing :joy:
You also helped me slash down the rows to 1/10 of the original.

Now I just have to figure out how to loop the animation and make the slider actually show all of the frames for each animation, and also give the slider back its control over the current frame. But I’m pretty sure I can find a way by combining things from my previous attempt!

1 Like

Thanks to you @carolhmj I now have this. Much, much better and exactly what I wanted to achieve! Probably still causes eye bleeds for you who know how to code :stuck_out_tongue_winking_eye:

Now I only need to understand why I get errors in the console if I start by pressing the Play button instead of the animation buttons :thinking:

Edit: It was not the Play button throwing errors. It is the slider that can not read the GoToFrame before the first animation is triggered.
And if I press the Play button first (before any of the animation triggers), the last animation is played but the slider does not register it. All works as expected if I start by pressing one of the animation triggers though.

Cube with slider | Babylon.js Playground (