UI ANIMATION: Everything You Need to Know | UE4 Tutorial

In this UE4 tutorial I will show you everything you need to know to create UI animations in Unreal Engine! Widget animations are very versatile and animated widgets can go beyond just basic widgets, so today we will go over how they work and how to create them, how to play animations and how to use materials as animations!
♥ Patreon: / nitrogendev
I have collaborated with EF EVE to bring you the best volumetric video products out there. If you're interested in that, make sure to check them out using the code "NITROGEN10": www.ef-eve.com/
Some of you requested me to make a video on more animated UI, so I made sure to cover both basic animations and more complex ones and how you can achieve them yourself. While I didn't dive into overly complicated animations, the general idea is that all complex (this really is an overstatement, what I really mean by complex is combined) animations are a combination of smaller widgets that are animated themselves. Unless you want to use materials for animations, which I covered as well!
Sources:
SLOW IN & SLOW OUT - The 12 Principles of Animation in Games by New Frame Plus: • SLOW IN & SLOW OUT - T...
Skill Tree System Tutorial: • How To Create a Skill ...
Music used in this video:
Like Saturn - Midnight Sailing
All content on Nitrogen is available for free. We, as a community, support completely free education available to everyone. Any support is appreciated for me to keep making content for free and improving it.

[@NitrogenDev]

If you're here to know my answer from the question in the video, it's easing out :) Make sure to check out this video to learn more about the technical side of widgets in UE4: kzbin.info/www/bejne/hIuriJWiba51Z7s As well, be sure to go over to Daniel's channel New Frame Plus: kzbin.info . His videos are amazing and you should definitely give them a go!

[@colleenzhang648]

Now a UI designer can run her own UI animation in the engine! Thanks a lot, man! We really need more UI material even motion graphic animation tutorials.But I can't find more information about this area, hope to see yours more! Really really thank you a lot!

[@NitrogenDev]

Sure thing! I'm happy to see that this video helped you!

[@QuantzzArt]

Specifically the materials part of this tutorial is something everyone making their first UI definitely needs to see because there's so little documentation on the art side of UMG, would be great if there was a followup video going into more detail on making cool dynamic materials for your menus

[@coffee-beast-99z]

This tutorial was honestly, so great. Thank you for being an amazing human and creating fantastic content!

[@MadpolygonDEV]

Im halfway in and its awesome so far 🙏

[@primitivepatterns]

awesome tutorial, thank you so much!

[@syno3608]

Super Helpful For UI . Thanks

[@madiac4583]

Love all these tuts man!!

[@NitrogenDev]

I'm really happy to hear that!

[@onevoltten6845]

Thanks for the tutorial!

[@zuchmiyoff4734]

indescribably useful, thank you

[@home-dream-records1399]

Amazing ! I hope to see more from you. Please do more tutorials like this.

[@NitrogenDev]

Happy to see you liked this tutorial! Unfortunately, I no longer make Unreal content. Instead, I now create video essays about game design. If that's also something you're interested in, I hope you'll stick around!

[@couture1054]

Great tut!

[@adrienhartman6811]

You make tutorials that are so easy to understand!

[@NitrogenDev]

Good to hear, thanks for the feedback!

[@conliviu]

Another one well done! 👍🏻 Long live the squares😉

[@NitrogenDev]

Nothing better than good ol' squares.

[@Admin-oe8zj]

that was relly great..thanks

[@elbozomemeoriginals7296]

this really helps and my computer is not screaming in pain thank you

[@NitrogenDev]

Might want to get it checked if it screams. Jokes aside, I'm happy to see that this helped you!

[@amuro9649]

great job

[@anjoomfaisal]

you can do so much with this! :D

[@soupinin7128]

Amazing! keep 'em coming

[@NitrogenDev]

Thanks! Will do!

[@JDPhoenix]

Hey Nitrogen, I got a question. When you're in another blueprint and you want to cast to the user interface, what would you put in the object input node? I'm attempting to grab one of the animations in the interface and have it play on command.

[@rifat.ahammed]

Thank You

[@2danimm]

thanks a lot :)!

[@MadpolygonDEV]

My man, you accepted my request! Manz thanks

[@NitrogenDev]

I hope that it clarified any questions about animations! :)

[@laureanogtt2171]

wow, how did you change the execution path in the loop to get it nicer?? algo, I'm getting nothing with the "call play animation (5:35) unreal 4.27

[@mokshithpb7991]

Really helpfull 🙂

[@NitrogenDev]

Glad to hear!

[@Your_Average_Black]

What if I wanted to perform an animation going in, the interface stays there until the button is clicked again and it animates going out?

[@desarrollou71x72]

hi, im having problems with the Aspect Ratio and Resolution for my mobile game, i know that i can use Anchors... but my UI has animations, if one of my animation moves from 0, 0 to 1024, 768 down-right corner it will works fine on a device supporting that resolution, but if i try with another device with different resolution the animation ends outscreen.... do you know a way to solve this? thanks.

[@uegamedev]

Cool! :)

[@zimai]

How can the front line beam be made into a dynamic material?

[@Animamundi24]

Excuse me, can material be set on non-animated HUD elements, such as Progress Bars or Text Blocks? Want to try to add an emissive color-shift glowing texture sample, slightly moved by panner, as fill color of progress bars

[@NitrogenDev]

Yes, you can. Wherever there is an image input, you can supply that with a material.

[@db3da591]

Hello Nitrogen! I've followed step by step the animation blueprint part but when i start the game (simulate) the animation does not start/work. Why?

[@db3da591]

Ok, i've already found a solution: All you have to do is to go in your Graph section, and link you Event Construct to a Play Animation node.

[@davideotape661]

This helped me, thank you

[@3Danful]

Hi there. Ive made a simple animation with my UI, but im stuck with the coding at 5:09. I finished this video, but nothing happens. Do i add "inputs" within the "Custom Event"? My animation doesnt play. (its a simple blinking animation in my Mainmenu),

[@3Danful]

Fixed it. It isnt the "Custom Event" you want, its the "Event Construct". Just replace it. now it works :)

[@JimmeeAnimAll]

Thank You for the tutorial , it's pretty cool, but I might missed it , but I think You didn't show how to call this custom event function to play animation in hud. I know how to call hud on viewport with hud content , but when I load this example , its empty and there is no animation whatsoever.

[@NitrogenDev]

I can't quite understand what you mean by calling a custom event to play animation in HUD. Can you say exactly to which custom event you're referring to?

[@JimmeeAnimAll]

@@NitrogenDev thank You for caring. In 5:05 You create custom event and hook up nodes , but compiling just first part wouldn't play animation inside the hud. I haven't done this queue part, but still, I assume, and as far as I "understand" blueprints, I have to call out this custom event "Play anim" prior to start animation.

[@NitrogenDev]

@@JimmeeAnimAll If calling "Play anim" isn't playing an animation, make sure that the event is actually called, that you hooked up the correct animation and that your animation does an easy to spot change, so you can see if it's truly working or not.

[@JimmeeAnimAll]

@@NitrogenDev "make sure that the event is actually called" that's the thing :) . I kind of didn't know how to do it, but I've found similar example with calling event with [a key pressed Event] hooked in player's blueprint. Thank You anyway for tutorials and reply

[@NitrogenDev]

@@JimmeeAnimAll Good to see you figured it out. :)

[@futurelight5536]

I am searching for about 4 months ago for ui animation & popup animation and ui materials but there are very small number of tourtal Can you make more? And i missed to say "you are legend"

[@NitrogenDev]

If I see that others are interested in this, then for sure I will make other videos on this topic.

[@timsonss]

@@NitrogenDev I am interested in this. Hopefully I count :D

[@NitrogenDev]

@@timsonss definitely haha.

[@timsonss]

@@NitrogenDev nice :D

[@lordofthelair6716]

Not bad at all

[@josephvanwyk2088]

Cool, I have a very advance question - whats the pipeline process for having talking heads on the UI ? You know, like the ones you see in Anno, Settlers, Commandos - they all had UIs with a 3D character head with dialogue & reaction animations. Commandos 2 had characters that bleed (show injuries). How complex is this sort of thing? (3d modeling excluded).

[@NitrogenDev]

That is certainly not an easy system to create. The way I would probably do it is using an initial speaker with unique properties that are used to drive the reaction and other properties of the second speaker, which then go back to the first one. For the bleeding characters I would simply store a boolean or integer (depending on how many levels of injuries you want) and switch between 3D models.

[@mehmetkaraer.]

Accidentally I closed my timeline how can i open that thing again.

[@NitrogenDev]

I might not be 100% accurate on this one because I don't have my Unreal open up right now, but I believe you can do that by going to the "Window" panel at the top, then search for "timeline" and a new timeline will open, which you can dock to its initial position.

[@mehmetkaraer.]

@@NitrogenDev Thanks mate i found it

[@buddelexperte5956]

Pretty nice tutorial but for me you were a bit too much not explaining when in the material part

[@futurelight5536]

Any one reading this do you know the comments doesn't cost anything so comment why us don't support the development teachers so now just type anything even if it is only❤(sorry for my English)

[@robowe]

understood everything up until he pulled up the materials 😂