Unity 3D - Starting to set up UI Animation using the Unity Animation and Animator Windows.

In this tutorial, I'll be looking at starting to set up UI Animation and Animator for UI Animation!! I'll start to set up Animation states for UI Open, Idle, Close and parameters on how to trigger those animations. Also check out How to Make a Bounce Game Series https://bit.ly/39HIYBU. 👉🏼 To Si

Most menus snap on and off; this tutorial makes them breathe. Using Unity's Animation and Animator windows, a level-complete UI gets three clips — open, idle, close — connected by Animator transitions and triggered from Playmaker. The pattern works for any popup in any game.

Step 1 — Trigger the UI

The setup: a "Great Job" panel with a Keep Playing button, off by default, that should appear when a falling coin (tagged coin, with Rigidbody 2D and trigger collider) reaches the character. A Game Manager FSM listens for the collision and fires an open lc ui event into a state that activates the UI game object. That works — but the UI just pops, which is what the rest of the tutorial fixes.

Step 2 — Three animation clips

Open Window > Animation and Window > Animator. With the UI selected, create lc open: set the sample rate to 12 fps (lower suits mobile; consoles can afford more), hit record, and keyframe the button's image color and text color from fully transparent to opaque over about five frames. Stop recording immediately when done — anything you touch while the timeline is red becomes a keyframe. Then use the clip dropdown's Create New Clip for lc idle, where the button scales to 1.1 at frame 6 and back to 1 at the end (copy-paste the first keyframes to the last frame for a perfect loop). A third clip, lc close, fades the button and text back to transparent and deactivates the UI object. In the clip assets, leave Loop Time on for idle only — open and close must play once.

Step 3 — Wire the Animator graph

All three clips appear automatically in the Animator. Right-click to make transitions: open to idle, idle to close, close back to open. The open-to-idle transition keeps Has Exit Time (auto-advance when the clip ends), with transition duration 0 and exit time 1 second. Idle-to-close is different: uncheck Has Exit Time and add a condition instead — create a bool parameter named lc close, and the transition fires when it's true. Keep a small transition duration here, because the button might be mid-pulse when clicked and should blend smoothly back to normal size. The close-to-open transition gets its own lc open bool the same way, duration 0, no exit time.

Step 4 — Drive it from Playmaker

Back in the Game Manager FSM, the open state activates the UI object and uses Play Animation targeting lc open explicitly — explicitly, because the animator may have ended in the closed state last time, and you want the opening every time. (Playmaker prompts to add the needed animation component; the three-dot icon lists the available clips.) After opening, a listener state watches the Keep Playing button with On Pointer Click Event, firing close ui. That state uses Set Animator Bool — paste the exact parameter name, lc close — to true, which trips the Animator's condition and plays the fade-out. Then a Wait of 1 second lets the close animation finish before a final Activate Game Object turns the UI off and the FSM loops back to listening. Coin drops, panel fades in, button pulses, click, fade out — a menu with actual life in it.