https://playground.babylonjs.com/#U5URZC#5
Good afternoon everyone. I hope you are all doing well today.
I have a question regarding the animation of a GUI.
Currently I have a scene and I’d like to fade out the GUI label after pressing a button. (Line 118)
I was also wondering is there any documentation on the possible animations for GUI?
I’ve been looking around a bit but I feel that I am not looking in the right places.
Thank you!
Ok I got something working:
https://playground.babylonjs.com/#U5URZC#7
But I’m wondering is it possible to have this working through CreateAndStartAnimations?
I’ll keep playing and report back, but all help is really appreicated 
Hey, nice fades! You’re doing pretty well.
Let’s take a look at the API for a GUI Control -class object. See all those properties? Well THOSE are the properties you get to animate… on BJS GUI Control-class objects. Certain subTypes have more properties… such as .thickness (border width). Some have colors and font settings. It takes some time/research to learn which properties are available on which type of controls… but notice one thing for sure: They are not “node” -class (mesh, camera, or light). They have no .animations property to “push” animations into.
So, let’s leave behind the keys and pushing, and dive-into where you REALLY want to be… and that’s using createAndStartAnimation, the world’s easiest animation method.
BUT… createAndStartAnimation (code-name ‘CASA’? nod)… prefers mesh, and not GUI controls. But I found a way to keep CASA happy… when animating GUI Control properties… and that’s line 2 of THIS #12 playground.
Mesh… have a getScene() function… and when I tried to use CASA on a GUI Control, it was erroring… no .getScene function. SOoo… line 2 adds a getScene() function to all GUI Control-class objects, and that makes CASA happy.
Now let’s look at lines 28-39… two functions I made… similar to other functions I have made… and they both use CASA. myspin() is animating the single float value control.rotation (neg or pos ok). Controls can ONLY rotate around z-axis… because they are flat. IF you would have put EACH text panel on a NON-full-screen GUI (instead, use the FOR-A-MESH version of GUI)… then we could have fully animated the panels… spinning them on ANY axis… because their GUI would be upon a mesh (such as a plane or box). But for FULL-SCREEN GUI, the dynamic texture is used on a screen “layer” and not upon a mesh. And thus, we can only spin them around Z-axis, as my +button is doing (to label).
Lastly, we need to call these two CASA animators… somewhere. Let’s head-down to line 229 area… your onClick event handler zone. Hey, there they are… lines 230 and 231.
Not TOO difficult, eh? Not too easy, either. Notice you have some OTHER animatable properties on GUI Control-class… like .centerX and .centerY, .top, .left, .color, .width, .height… all can be animated with CASA… if you find that somehow entertaining. 
Let’s say you DID decide to make a separate createGUIForMesh for EACH text panel. THEN… you get a little more animating power… because there’s lots of fun properties on Mesh-class objects… including… physics. Panels hanging by chains)?
And, of course, mesh can be used as particle emitters, and cast shadows, and get fancy animated shader-textures such as clouds floating past or lava flow. It can get REALLY out of ‘control’… and fun.
Sometimes there’s trouble. With on-a-mesh GUI… the camera is allowed to navigate away-from the GUI, so… some kind of parent-meshpanel-to-camera might be needed. I think our GUI 3D system… is basically… every control gets a mesh of its own… so… YOU putting each panel on a plane… not so unusual at all.
I like-but-question your creation of TWO full-screen GUI layers… that you did, but I think you simply re-created the same one. Not sure what you did, there, yet… but it’s fascinating.
According to GUI docs, that cannot be done. Use the Babylon GUI - Babylon.js Documentation “Please note that only one fullscreen mode GUI is allowed per scene”. Maybe the docs are lying to us.
All in all, scroll down a bit from that above docs link… and you’ll find:
var advancedTexture2 = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(myPlane, 1024, 1024); Ahh, createForMesh version, yum. You can create HUNDREDS of those, if you wish.
Perhaps, to stay organized… first create 3 planes… plane1, plane2, plane3. THEN…
plane1.gui = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane1, 1024, 1024);
plane2.gui = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane2, 1024, 1024);
plane3.gui = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane3, 1024, 1024);
That way, each of your planes… sort of carries its gui WITH it… in a property-pocket called .gui Perhaps handy… IF you choose to try multiple createForMesh gui’s. Those connecting-lines… COULD be a challenge… if using multiple createForMesh gui’s. The BJS LinesMesh might work… a non-GUI lines-drawing system.
The AdvancedDynamicTexture (sometimes called ADT) IS a type of GUI Control (a container)… so IT can animate its .left, .top, .rotation, etc, etc, too. Slide an entire ADT off-screen left/right/up/down… and/or rotate it and scaleX/scaleY it, just like I did for label. Can do. FUN! Mad scientist experiments!
Ok, I hope I have been helpful. Animating GUI controls on a full-screen GUI… is a bit limited. Animating GUI controls that EACH have a standard BJS plane or box mesh… MORE powerful (cuz you’d have GUI animation AND mesh animation power).
Update: In PG #13, I tried adding a myLineSlider()… trying to slide the green line off-screen to the left… while keeping it vertical. I got dummymesh and dummycontrol… and I switch green line3 linkedMesh and connectedControl to the dummies… just after click. Then try to move them with the myLineSlider animation, but line3 linkedMesh seems to want to STAY linked to the hedragon and… well it’s just a mess… and STILL fun! Maybe we/I/you should just set line3.isVisible = false (upon click) and then go have a beer and call it a day.
A last note. Whenever you try to animate .left and .top… it might be wiser to use .leftInPixels and .topInPixels… to avoid needing to add “px” to the values…used inside the animation function. Same goes for linkOffsetXInPixels and linkOffsetYInPixels.
What a wonderful and insightful read @Wingnut . You really are an asset here.
I would likely never of been aware of BABYLON.GUI.Control.prototype.getScene = function () { return scene }; without your input.
I loved your experiment!
You have taught me a lot tonight. Sometimes I feel I need to learn case by case and ask questions and for this I am thankful.
The chains are amazing and something I will look at more.
You have really given me a lot to experiment with and maybe something that can be of use to others someday soon.
Regarding the two full screen GUIs - I noticed something odd happened when checking it out on mobile - the screen went black. Maybe it’s kind of good on desktop but I don;t trust it on mobile now.
Thank you again Wingnut. You are a gooden!
really - so much to think about. And lot’s learnt. We have a saying at home - that you’ll never know as much as he forgets. I’m very inspired.
For the searchers regarding the fades of alphas on GUIs -
BABYLON.Animation.CreateAndStartAnimation(“VisAnim”, control, “alpha”, speed, 10, alphaOne, alphaTwo, 0, ease);
and read Wingnut’s essay. It’ll start you off…
I’ve cleaned up PG here due to his notes:
May help someone: https://www.babylonjs-playground.com/#U5URZC#17
Nice work, MQ!
One of the coolest things about CreateAndStartAnimation()… is the dataType auto-sensing. Whether the animated property value is vector3, vector4, float, color3, color4, Quaternion… CASA knows how to animate it. Sweet. Another fine product… from Deltakosh Industries.
I’m really loving the capabilities of this programme. I’m not a natural programmer - but hey who is really but a select few - however this is getting easier to get to grips with via a community like this.
I tend to use Unity - but I’ve a feeling Babylon has a bright future.
And @Deltakosh - you are some boy
Cool! Yeah, and @MackeyK24 … that guy has been working his brains-out… on something called… umm…The Unity Toolkit? Or… is it… The Babylon Toolkit for Unity? Either way, he is connecting Unity to BabylonJS… and he is being VERY thorough/detailed. Let’s do a local BJS docs search for “Unity”
Ahh yes… MackeyK and team have been at-work. I don’t know much about it… but… let’s do a search for Unity at our old forum.
Plenty of talking about Unity. Yay!
Hey, thx for the kind words about BJS and the forum… very nice of you. Good to have you in our community.
LOL 
looks like a scifi mega corporation name 
I could tell you some stuff about DK. First, he’s a family guy…likely a good one, but he is also… 50% Cray XMP-5 Super-computer.
Folks like me, who are scared to submit PR’s to BJS core-code… worry most about something called FRR… Far-Reaching Ramifications. I’m a whimsical dreamer and a primarily-clueless power-yapper… who likes to pretend that he’s somehow pertinent to the world of BJS (trying desperately to “be somebody”). I have found… thru years of trying and yapping… that I’m better at making-up 3D jokes… than I am at anything technical.
Often, i dream-up a retarded idea that… if installed in core… would likely crack the planet in-half. When I DO occassionally think-up something that IS core-plausible and (PR) “pull-request” -worthy… I need to do a very careful FRR investigation… to try to envision all the BJS core stuff… that my idea would break or start on-fire. That investigation takes me… about a month to do.
Now present that SAME idea/proposal… to Deltakosh. It NEVER takes more than 30 seconds… for him to traverse that “big list” of FRR… and know what that mod would break/blow-up. 30 SECONDS! OMG! How does he do that? Surely, he doesn’t smoke pot.
He’s nothing short-of amazing… and not just a little amazing. A WHOLE CRAPLOAD of amazing, and a darned nice guy, to-boot. VERY accommodating and kind… to puppies and big dogs alike… treats us all the same, no matter how stupid the things we/I type/think-up. Good people, I’m honored to know him a little. He rescued my scared-puppy butt from mud-bogs MANY times… always with a smile and a cup of hot-cocoa after the rescue (WHILE teaching us/me HOW and WHY we/I was being stupid).
Just don’t ask him about shadow precision. Even though he knows it all perfectly, NOBODY can explain THAT to another, I’m pretty sure. I’m starting to think “stencil buffers” are just as intense and un-teachable. hehe. Good things to TRY to learn about, though. We get LOTS of shadow precision questions/problems on the forum - we need more experts/tuts. And “stencil buffer”… I just like the NAME of that thing, so I’m going to learn about it, someday.
Hey, thanks Deltakosh… for tons and tons of learning and fun! (Wingy tops-off DK’s Cray CPU cooling system… with fine wine)
This is really true and to some extends I truly consider this community as a part of my extended family
You are both saints and scholars hahaha!
And how could you not like puppies, dogs or hot cocoa?
You do have a good and nice forum here - a good community. Early days but long may it last!
Hello @Mark_Quinn, @Wingnut, and @Deltakosh…chanced upon this thread as I am trying to animate some UI stuff in Babylon. Not only was this thread really informative but also inspiring and encouraging to see this community and how it interacts. I know I’m late to the party here, but this is absolutely awesome stuff here.
First-time post from me here… I stumbled on this article in pursuit of something similar, and the solution looks/ed promising.
Except that I’m using TS, and adding the prototype function is eluding me… Can you (Wingnut et al) help?
I’ve found that TS wants the new function to be defined on the interface to be extended before being attached as done on line 2 of the #12 PG that Wingnut posted.
HOWEVER: TS does not seem to accepts named interfaces with dots. So Stackoverflow is flooded with people explaining how to extend String class etc, but trying to specify BABYLON.GUI.Control doesn’t work.
Any thoughts/pointers?
Hi and Welcome to the Community,
This old thread is kind of a bit ‘messy’ (with many PGs not working) and things also have evolved meanwhile.
Would it be too much to ask you to open a new thread with a similar title (may be add TS in the title) and also better describe what exactly you want to achieve (animate a single control or make a fade of the entire gui?) I am sure people here will be happy to give you an appropriate and up-to-date solution for your request…