How to create UI animation with code in Unity | UI Tweening tutorial with gizmos

[median pine]

Animate your UI elements in Unity by code! We'll use tweening for this, but won't use any outside asset and instead write our own. We write a script that handles the animation of an element's position and alpha and go a step further by visualizing the locations it will end up in with Gizmos. That takes a lot off guesswork out of finding the correct distances and placements when creating your UI.

You will learn:

• How to move a UI element by code (tweening)
• How to animate position and alpha by code
• How to work with Gizmos (Visualisation Helpers)
• How to use the [Button] and [ShowIf] attribute of Odin Inspector in case you have the asset (it is not needed for this tutorial, but I enjoy working with it and maybe you do, too)
• How to use [ContextMenu] to create quick access to methods in the inspector for testing

https://www.youtube.com/watch?v=AaudFyM3KV0

[restive heath]

nice. but why not use timeline? seems to me Timeline is perfect for this scenario (especially given the fact that you can reuse a timeline and create custom clips)

I use some container script that gets animation references to play. if anims are null, it just skips them. can be used with UI and non-UI game objects really. and with a good interface, you can allow adding custom animation scripts. here's a sample code https://github.com/somedeveloper00/UnityCommon/blob/master/SwitchContainer/SwitchContainer.cs (ignore SequenceAnims)

[median pine]

Timeline, to me, is much more for cutscenes or related things. Using Animations could be a path to take, but by using a modular system like this with timings, directions, initial positions and even curves you can mix and match either in the inspector or through code gives a ton of modularity. It's also really easy to plop it into every project without needing to include more packages, extra animation files, and such.

If you enjoy creating these things with animations or timeline, go for it! I'm not here to tell you you have to switch and sometimes doing something for the fun of it is all the reason there needs to be. (tagging you so you won't miss it, it has been a few days since your comment :) @restive heath )

[chilly harness]

I like the approach (I use code driven UI animations a lot, it's really necessary on bigger projects). I only skimmed the video, but seems well done. My only critique is to consider using one of those zooming capture tools, so that the font is bigger in VS/Code. Your theme is a subtler dark mode colour spectrum, so it just makes it hard to read on a phone. But I really liked the detail.

[median pine]

Glad you enjoyed it =)! It's been a lot of fun to create. I've been using the system for about a year by now in my projects and it made things a lot easier.