UI animation

Learn to animate UI elements with smooth transitions.

UI Animation and Tweening

Popups or buttons popping onto the screen without transition feel unpolished. Tweening or Coroutines introduce scaling, bounces, and eased transitions to UI elements.

// Bouncing button scale slightly upon press
transform.localScale = Vector3.one * 1.2f;

Scaling buttons momentarily on click (Punch/Scale) reinforces the responsiveness of the interface.

Smooth Fading with CanvasGroup

Bringing a menu panel into view with smooth transparency transitions is managed via a CanvasGroup component, interpolating alpha from 0.0 to 1.0.

public CanvasGroup canvasGroup;

IEnumerator FadeIn(float speed) {
    while (canvasGroup.alpha < 1f) {
        canvasGroup.alpha += Time.deltaTime * speed;
        yield return null;
    }
}

This transition transforms abrupt window popups into elegant cinematic fades.

Exercise UI alpha transition test

Define a Start method. Inside, declare float alphaDegeri = 1.0f; and print "UI opakligi: " + alphaDegeri to the console.

Show example solution

using UnityEngine;

public class UiPolishTester : MonoBehaviour
{
    void Start()
    {
        float alphaDegeri = 1.0f;
        Debug.Log("UI opakligi: " + alphaDegeri);
    }
}

Test yourself

What is the animation effect called where a button momentarily scales up and returns to normal size upon click?
- NavMesh Bake process
- JSON serialization loop
- Vertex shader transformation
- Punch / Scale animation
Show answer

Punch / Scale animation — The Punch / Scale effect supplies momentary scaling feedback to UI buttons, strengthening interaction tactility.

CanvasGroup visibility alpha

canvasGroup.____ = 1f;

Show answer

canvasGroup.alpha = 1f;

UI transition concepts

CanvasGroup

UI transparency and interaction manager
alpha

UI visibility level from 0 to 1
Tween

Smooth interpolation between values
Fade In

Smooth transition to full visibility

Next lesson: Summary - Polish project

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies