Create UI ANIMATIONS without ❌CODING❌! - Unity UI tutorial

[@CocoCode]

Want to learn how to create advanced UI animations? 👉 Check out my newest course, Master Unity UI ➡ bit.ly/cc-unity-ui-32 It’s packed with everything you need to create awesome UI ✨🎨

[@Darkaby0Renee]

Easiest animation tutorial I've watched so far. What's great is that it doesn't only apply to UI elements but also gameobject in your scene. Thank you very much!

[@thomlaurent]

Using animation like this in your UI will have a big performance impact because even when in idle each frame the animator updates components animated fields which causes a canvas redraw (its even worse when using LayoutGroups) A fix would be to disable the animator (using an StateMachineBehaviour for example) when in idle to re-enable it when you want to animate

[@andreas1416]

Do you have any numbers to quantify what "big" means?

[@thomlaurent]

@@andreas1416 It totally depends of how complex your UI is, btw I work on mobile so maybe on pc this is not a problem at all. I would say do what's quicker for you then profile and if it has no noticeable impact go next

[@touzimsky]

From the patchnotes In Unity 2019.3: "UI: Fixed performance issues with Animation by not dirtying the Layout if an Animation updates items. "

[@MarcosTeles-x9o]

It is important to note that the performance impact of the Animator can vary depending on the complexity of the animations, the number of animated objects, and the hardware on which the game is running. In many cases, the performance impact may not be significant enough to justify disabling the Animator completely. If you are using Unity 2019.3 or a later version, this fix should help improve the performance of animations in the UI when using the Animator.

[@moonymachine8125]

You can also set the animator up to point to an animator state with no animation as the default entry animation. Then you can add states that animate and go back to no animation. You can then play any animation states directly with Animator.Play(). I haven't profiled the performance comparison, but I imagine that it solves some of the performance issues with dirtying the UI canvas.

[@ALIALNAQEEB]

and the new brackeys has emerged

[@elmetiu]

I swear i love your videos, your style thumbnails, video content they are all fantastic keep doing this!!

[@nofilkhan3164]

Wao never I have ever seen so detailed and explained tut,i would pay for a course if you launch one .Keep going buddy

[@moonymachine8125]

This is also how you can easily animate 2D sprite sheet animations in your UI. Excellent video!

[@loizosrr]

The best understanding animation/animator tutorial I ever watch ! Thanks 👍

[@asila2652]

The new brackeys we all needed

[@coolsai]

thank you very much 💖 currently i am working on a math game and this animation helps me to make game more awesome ⚡

[@MrFarkasOfficial]

awesome video! i have used both methods: animator transitions and scripting lean tween transitions. if you're not afraid to code, i think the scripting method is cleaner and it's easier to fix things if you don't like how something is looking. the animator method is very good if you're used to making animations and animating, but if you're just getting into it, it can be pretty overwhelming sometimes because you're working with so many seperate animations that you have to create manually that you then have to combine, edit, and transition to. but i think this really is one of those things that you just choose which one you like more. or you could even combine them.

[@CocoCode]

Exactly! I'm aware that the second example with transitions might be a bit complicated, but I tried to show a real game scenario! I think the animator is perfect for animations shown on the example with the stars - with the multiple objects.

[@MrFarkasOfficial]

@@CocoCode you did an excellent job with this video because you showed what the animator transitions are really good at. i didn't know that you could edit the curves, by the way! that's a gamechanger! i was adding the ease effects manually like a peasant.

[@AnkitSingh-wq2rk]

@@MrFarkasOfficial main issues i face using animation is animating ui for dynamic screens and linking in scripting based everything stays in script and you have almost full control over it there itself ... for animator you have also keep track of linking things and adding proper animation events that too with raw string/data which is kinda error prone

[@MrFarkasOfficial]

@@AnkitSingh-wq2rk that's true

[@tomatogogo]

I was looking for how to make Animator state do once only , then I found this video, which solved a big problem! grateful!

[@krasimirzhelezov]

The only good tutorial for UI transition animation

[@sorixgameyt920]

Best tutorial

[@simple_6230]

Thank you so much Coco! Your tutorials are so great!

[@arda9310]

I just wanted to say i was here from 600 subs

[@koganboss4874]

Very good tutorial. Easy to understand=) Thank you.

[@CocoCode]

Glad it helped!

[@Vinaykumar-bf8hj]

Wonderful Voice and Tutorial

[@MrRomainlalire]

Love the tutorial, but I have an issue : if you click two times on Open (for example) it stays on that state and it I click on Close when it's blocked, it plays the animation and go back to the other. Is it a way to fix that?

[@jeremaineramirez5475]

THIS IS WHAT I NEED, THANK YOU VERY HELPFUL

[@ahmedaqeel636]

Pro I don't complete the video because internet so bad but I trust you are the best

[@viktorbobrovsky3632]

Nice tutorial, but where is the moment when you assign some trigger to the button "Start animation" at the last part of the video? You just created the animation with stars and disappearing the panel with adding an event, so how does it listen on your clicks on the button? Though thanks a lot! Maybe i missed something...

[@milosmml7777]

I don't understand the whole point of having a closed animaion and an idle one where the ui just stands still. Why don't you just turn the looping off in the assets of that specific animation. Your animations tab will look a lot cleaner rather than a spideweb mess.

[@SxAxNxO_Gaming]

One thump up is not enough. Thx for your videos 👍

[@ItsSunnyMonster]

yea same I want to spam the thumb up button just to show how much I appreciated him :)

[@amirhassan8271]

Good tutorial nice method of teaching.

[@worldsedge4991]

Hello. Thank you for this tutorial. I happened to look for it when I wanted to animate three gold stars at the end of my game levels... And, hey! Look at that. It's just like one of the examples. I look forward to incorporating some of these ideas into my game.

[@tenorgames]

This is so good. Subbed.

[@vicente7938]

Thank you for this!

[@EasyPoker]

When I set the animation to idle in the animator, the first animation does not show. When I delete the idle the animation loops again. Any idea of why this happens?

[@sohankaushik7]

Best tut for beginners, but also it's not recommend to change UI by animation!

[@CocoCode]

Hey! Check out my other tutorial where I show how to use tweening library 🐬

[@mimobenslimen7035]

@12:22 that is wrong, do not use Canvas group for individual objects, you can just use the image alpha. a canvas group require a GROUP of children.

[@anttipylsymusic]

Thanks for this.

[@arianawells673]

I'd like to thank you so much for doing this video. this saved me like you have no idea

[@zerblion]

Wonderful bro,Thank you verymuch!

[@neHCuoHEpa8888]

That is good tutorial for something that you don’t need. Instead you can do the same thing with 1 class and around 10 lines, with really much more control and easy way to redacted if need. Also the work with animation is really confusing.

[@CocoCode]

Hey! Be sure to check out my other tutorial that talks about exactly that: kzbin.info/www/bejne/j6KwoYl5hb1lotU

[@Aleksandar_Dimitrov]

How to use one button to open and close the inventory. Is it possible?

[@d1kiywolf]

Very great and simple tutorial! Thank you from Russia!!

[@progamerattack8703]

Thank you that was bretty help full to me🥰🥰🥰🥰

[@ColdOneK]

Not a bad tutorial, but watching it gave me a much better idea. The problem: An "idle" animation causes Unity to be forced to redraw the canvas EVERY frame. Why? Even though it might not be changing visually, it is STILL technically animating. Solution: Add a script that enables & then disables the Animator component when the animation is complete. It will stay on the last active frame. I was about to go through the process of learning one of the tweening libraries(I still need to), but this way is much better, because the Animator is so easy & powerful to work with.

[@qqq9542]

awesome man. But if I follow the video above, does it impact performance on the device?

[@ColdOneK]

​@@qqq9542 - Yes. Both achieve the same goal with different methods.

[@suicune2001]

Amazing!

[@andierahmatdiansyah49]

how to create animation when game is over? like the game show game over panel with animation, i have problem when the game show game over panel, but the game still not freeze.

[@MrGuluere]

Lifesaver!

[@marcdirian6370]

HI Love your tutorial but..... What UNity version do u use ? With Unity 2020.3.33 when I use Animator my unity. application crash everytime.. 🙂thank's

[@AIArtistNoahC]

thank you so much. I got U :D

[@ravenace8485]

I don't understand how you're able to mask the inventory system, I'm kinda upset because as a beginner I'm stuck at this step.. I even watched your mask video too

[@thomlaurent]

You have an Image to fade in/out, so why not using its color alpha?

[@macaaris1018]

Nice👍

[@ValentiBruno]

thank you very much

[@rijufrancispk4803]

How to use that same pouch bag icon to close the inventory, anyone please help?

[@johnnyrod328]

Game object with animator is inactive UnityEngine.Animator:Play (string) Anyone knows what is wrong with my animator?

[@JaviCoder]

nice video!, what about performance? i havent tested but according to Unity, "Animators will dirty their elements every frame, even if the value in the animation does not change", which results in a redraw (60fps)

[@CocoCode]

That is a great question! Check out the video description for more details. I’ll do my tests about that and will update it if I’ll find something more

[@ColdOneK]

I figured out a solution. Just disable the animator component after the animation completes.

[@sparklydavid]

Thanks

[@liualex32]

nice video

[@pladooklocal7094]

i love your tutorial, Thank you

[@GreenGuru23]

flame!) thanks

[@RockLiu-b2l]

awesome

[@lidjest9888]

Очень классный урок

[@bajusztibor6232]

TY

[@wylmalucia3353]

Maravilhoso!

[@Ostavnow]

I did not like the video that you have created as many as 4 animations, when you could create one.I explain how it can be done, do one animation of the panel opening, then do the settings that it is not repeated, make a condition such as bool, copy our animation in Animator ctrl + d (in the files will be only one animation) now change the copied animation speed to -1 and connect them arrows, and then you know how to do

[@AnthonyRosenbaum]

FYI using the Animator is VERY expensive and highly unrecommended for simple animations

[@CocoCode]

Hey! This is why I also created different video where I show how to animate your UI using lerping: kzbin.info/www/bejne/j6KwoYl5hb1lotU

[@fv4202x]

animations much better

[@nTu4Ka]

Ко-ко-ко

[@emreyasar5454]

+1

[@FWpapo]

Never animate ui using unitys animator..

[@Distriks]

Why?

[@FWpapo]

@@Distriks it had big performance impact thou in unity 2019 they "fixed" it but its still no good practice. That fix isnt perfect.

[@igd1591]

The Animator component is not recommended for the UI. unity.com/how-to/unity-ui-optimization-tips