UMG on mouse hover over button change image gradually

Hello,

I’d like to know how can I make a smooth transition between two images that I put in a button style (one for the normal state, and one for the highlighted state), so when I hover over with the mouse the image of the button to change over short amount of time.

Something like this Apollo - Responsive Animated Template Preview - ThemeForest

Thanks.

You can do this using UMG animation.

Create a new animation and use the keyframe buttons to start the creation of the fade.
Follow this documentation to know more Animation | Unreal Engine Documentation

85565-fade.png

85566-fade2.png

I’ve looked into this, and the only way I can think of is, creating two buttons one on top of the other, so when I hover over one button it should gradually disappear and the other button would appear.

I’m sure there is another more convenient way of going about it.

Hey, no you can just fade the color and opacity to the other color. Should be all you have to do in order for it to work.

Maybe, we’re not understanding each other :slight_smile:
I have set up these two images on the same button (one for the normal style and one for the highlighted

85786-btnimgnormal.png

85787-btnimghighlight.png

)

And I’d like when I hover over the button, a smooth gradual change to occur from the normal style and the highlighted style image.

Yes, but it’s not as easy as it probably should be, unless UMG still has some tricks up its sleeve I haven’t found yet (which is entirely possible).

You’ll need to make the buttons a new widget class so that you can utilize the ‘on mouse enter’ event. Then, I would create a dynamic material within this button widget so that you can set up a lerp from texture 1 to texture 2 over a short period, which you could drive with an ‘interp to constant’ node. Be sure to set the button’s material instance variable as ‘editable’ and ‘expose on spawn’. Finally, back in your main widget blueprint, you can just place that button widget where you need it and change the material instance’s textures right there.

Of course, then you have to add in what the button should do, when clicked, but this is all entirely doable. It’s not ideal, but doable.

Thank you SVR33 for the answer