Can you animate the opacity of widgets?

I am experimenting with UMG and I want to have everything on-screen animate with a fade in that currently is a pure black rectangle controlled by a timeline in the HUD blueprint. But it seem like UMG gets layered on top of that again.

I have different things I need to display such as counters and time. But the only value that adjust opacity of the text block in UMG doesn’t seem to be animatable. And the only real way of turning on and off widgets seem to be either on or off instantly, no methods of animation the whole UMG thing as a whole.

Is there no way to animate the opacity in an easy way?

wow thanks for such a detailed “mini tutorial” creds to you man.

Hello fanzypantz,

This is a known issue. However, I may have a viable workaround for you. This will in any case get you started on the right path.

In the following example I have placed a text block in my designer tab and I am updating the alpha with the tick function in order to fade it out over time. I hope this helps.

Make it a great day

Mind if I ask how you changed the Set Color and Opacity to take something other than a Slate struct?

Hello Digital_Kitchen,

What I did was split the pin. This can be done with other nodes as well that have multiple values running into them. All you have to do is right click and choose split pin.

Here is what it looks like:

28808-fadehelp4.png

Hey guys am trying this tutorial,. my texts fades but the text also turns pink?? Any ideas?
Ed

Hello heather1996,

You may need to use the GET color and opacity and plug these values in for all of the other options that are not being changed to ensure that you get the correct coloring. However it might be worth mentioning that you can animate the opacity through an animation inside of your widget blueprint in 4.7.6. I hope this information helps.

Example:

Here you can see that I have already created a new animation by clicking the [+New] button that can be found in the lower left (Animations Panel)

Here you can see that I have set up two key frames ( one with the opacity at 1 and the other with the opacity at 0) that causes the text to fade out over a span of 3 seconds

Make it a great day

1 Like

I’m trying to reverse this… fade in instead of fade out… can you guys help me?

Hello Yahiya Jasem,

In order to fade something in instead of fading it out, the only difference you would need to make would be to start with an opacity of 0 and then have it transition to 1. I hope that this information helps.

Make it a great day

thanks Rudy, I animated the widgets from “Designer” tab … couldn’t do that from the “Graph” tab but i’ll keep trying

Thanks a lot!!! I’ve spent about two hours trying to find the problem :smiley:

Hello Rudy,

Firstly I want to say as a fan of workarounds, this is awesome!

I am having a little bit of trouble, however. I am having a progress bar fade in on change. I have a border that I am using as a parent. I have set the tint opacity set to 0.2, but on fade in it continues to increase the alpha.

Is there a way to set a timer here?

Hello Mr. Magiks,

I am not sure what issue it is that you are having. Could you provide screen shots, video, or elaborate on what exactly it is that you are seeing and how this is at an inverse to what you would expect?

Hello, ,

I’ll start off stating that I am using 4.11.0 and the Animation section in the widget blueprint is not working correctly. I’ll take that up in another posting. This is why I scoured and found your workaround.

I am trying to set my progress bars to fadeIn when “1.0< and fadeOut when “1.0>=” or in this case FadeIn"0.95=<” FadeOut “9.5>” since my lowest drain is 0.05. However, since the Alpha in all of the Brush colors is constantly increasing whenthe FadeIn objective is met it cannot begin decreasing when the FadeOut objective is met.

If the image isn’t good I can take closer shots.

Is there a way for me to set this with a timer? Or perhaps another node that I am oblivious to?

Hello Mr. Magiks,

When you say that you would like to use a time do you mean functions or event timers? I have provided and example of how to use event timers below. I hope that this information helps.

Example:

In the example below I have created two event timers (“FadeIn” and “FadeOut”). In order to fade the desired widget using the setup below you would call the custom event needed (FadeIn/FadeOut) and you would set the variable “Target Widget”. This will then run the timers associated with these events and it will fade the widget in or out depending on what is called.

Make it a great day

Hello ,

Thank you, this is exactly what I needed. I’m not sure why it didn’t occur to me to use a pause. Thank you for the help!

Hey ,

I’m digging your organization in the graphs, man! I just started down the path of programming a couple days ago and have been finding a lot of tutorials to help me on my way. I’m currently working on a little 2D side-scroller using Paper 2D just to practice and start somewhere simple. I’ve been doing fairly well, and I ran across this conversation as I was trying to find a way to make my HUD fade in at the start of a level. At the moment, I have a Matinee for a Fade In from a black screen, however, my Progress Bar (Health) continues to show up on top of the black screen. I’ve tried to use the Animation built into the Widget’s Designer viewport, but no luck there. If you have any help or advice for me, it would be greatly appreciated! Thanks in advance!

GR1M

Hello G21M,

Could you provide screen shots of your current setup using the animation time line?

Hey Rudy, I’m trying to get an image to fade in once the player has clicked play in the main menu but I seem to be going wrong somewhere. I have a widget which I want to fade in but I don’t know how I get it to play. Can you help please?

Hello K_Clayt,

It looks like you will want to use event construct instead of tick to start your animation. What this will do is start the animation as soon as the widget is added to the viewport. If you are using tick. This will cause it to try and play the animation every frame. I hope that this information helps.

Make it a great day