Animation transform for GUI elements?

Questions
1

I’m trying to do two things, I’m trying to set a button element above the screen so that I can animate it popping down and then popping back up after a few seconds.

https://www.babylonjs-playground.com/#XCPP9Y#1353

Can someone explain how I can get the element above the screen using vertical alignment and the proper property to apply the animation on the Y axis?

2

Hi i73. That playground uses a fullscreen gui, so you cannot place a control above the fullscreen canvas. There’s nothing up there to place it upon.

You COULD make your drop-down panel-o-GUI… be on a plane (not full screen). Perhaps parent the plane to the cam, position it high, and at display-time, lower the plane into cam-view… perfect.

Did you know controls can be zero-height? Does that give you an idea how to “fake” the drop-down panel? Make it LOOK LIKE its dropping-down, when it is actually increasing height, maybe with a little increasing .top, too?

Let’s take a test drive: https://www.babylonjs-playground.com/#I7LKJY#10

Click on screen, to lower/raise the goo. Fun! Not sure if that will work for your project, but what the heck… it had to be tested. :slight_smile: Stay tuned… possible better answers (and possibly better anim methods for control .height) ahead.

You might want to make a custom button class… that installs a raiser and dropper on each button you make (in case you need MANY). Each button might have its own timer… for how long to show it before raising. intelligent buttons… fortified with extra i73 vitamins. :slight_smile: EACH ONE could be on its own plane. Wow. When each button has its own plane, all sorts of button-effects are possible.

Fades-ins and dissolve-outs, too. Or just make a particle explosion for entry/exit. You know you have it… when players play-with the GUI… more than they use the actual app. :slight_smile:

3

That’ works perfectly, and I’ll do that, how would I be able to do that to an animation that plays then after a few seconds goes away? I’m just stuck on the animation properties.

4

That would be setTimeout (wait then run once). https://www.babylonjs-playground.com/#I7LKJY#11

There’s a 3 second delay, and then up she goes.

The setIntervals (wait and run repeatedly) in the scene… those are for “doing things gradually”… slows-down the raising/lowering.

I think you could do it with standard keyframe animation, too. Lerp-meisters could probably use lerp-operations, too. I’m not the best animator. setTimeouts and setIntervals… might be distasteful to some. scene deltaTime methods and/or lerp methods… might be wiser… but I can’t teach you those, very well.

5

Thank you Wing, I can use that :slight_smile:

1 Like
6

A really quick follow up because I can’t seem to get this animation, I’m trying to animate a count down 3... 2.... 1... go! and I currently have:

        icon3= new BABYLON.GUI.Image("", "/scenes/img/countdown-3.png");
        icon2 = new BABYLON.GUI.Image("", "/scenes/img/countdown-2.png");
        icon1 = new BABYLON.GUI.Image("", "/scenes/img/countdown-1-btn.png");
        go = new BABYLON.GUI.Image("", "/scenes/img/countdown-go-btn.png");
//////////////////////////////////////////////////////////////////////////
        display(icon : BABYLON.GUI.Image){
            icon.isVisible = true;
            this.dtimer = setInterval(function(){
                icon.heightInPixels += 2;
                icon.widthInPixels +=2;
            }, 10);
            icon.isVisible = false;
            icon.heightInPixels = 100;
            icon.widthInPixels = 100;
        }
    
        do(){

            this.display(this.icon3);
            setTimeout(function(){
                clearInterval(this.rtimer); 
                this.icon3.isVisible = false;
            }, 1000);
        };

I’d like the icons to expand for one second then change then disappear once all done. I’m trying to understand the events like these but can’t seem to figure it out to my capacity.

7

https://www.babylonjs-playground.com/#H03KNW#21

I can’t either. I’m trying a “scaleTo” method overload on all Controls. What a mess. I got it counting from 2 to GO! but it misses 3 and 1. Something to do with onEnd being called twice per anim run. Still studying, but its lunch time now. :slight_smile: Maybe you or others can help me get it running. It’s pretty close-to “button knows how to upscale, wait some time, then downscale”. (self-contained smart button). Not there yet. :slight_smile:

I told you that I suck at animating… and its even worse for animating gui controls (as opposed to nodes like mesh, lights, and cams). :slight_smile:

1 Like
8

Thank you so much for your help Wing, I’ll try and rig this to work!

1 Like
9

https://www.babylonjs-playground.com/#H03KNW#22 Use this #22 as a starter for your experiments. It overloads BABYLON.GUI.Button instead of BABYLON.GUI.Control. A little safer overload target… if overloading is EVER safe/wise. :slight_smile:

Even safer would be… wait til after the button is made, and then do button.dropped = true; and button.scaleTo = function() {blah blah foo}; Then you are overloading only YOUR button, and not all buttons worldwide. :slight_smile:

There’s some gurus nearby… watching us bleed… giggling at us and reminiscing about when THEY had these kinds of problems. They could fix us up in 10 minutes… I know they could… cuz they’re Gods. Let’s do a lot of moaning and sighing… see if we can get one to feel sorry for us… and help us out with wiser ways. heh.