UI animations in Unity

Introduction

UI animations make your app or game feel alive and smooth. They help guide users and make interactions clear.

When you want buttons to gently change size or color when clicked.

To smoothly show or hide menus instead of popping them instantly.

When you want to highlight important messages with a fade or slide effect.

To create loading spinners or progress bars that move.

When you want to add polish by animating UI elements on screen transitions.

Syntax

Unity

using UnityEngine;
using UnityEngine.UI;

public class SimpleUIAnimation : MonoBehaviour
{
    public RectTransform uiElement;

    void Start()
    {
        // Example: Move UI element smoothly
        StartCoroutine(MoveUI());
    }

    System.Collections.IEnumerator MoveUI()
    {
        Vector3 startPos = uiElement.anchoredPosition;
        Vector3 endPos = startPos + new Vector3(0, 100, 0);
        float duration = 1f;
        float elapsed = 0f;

        while (elapsed < duration)
        {
            uiElement.anchoredPosition = Vector3.Lerp(startPos, endPos, elapsed / duration);
            elapsed += Time.deltaTime;
            yield return null;
        }

        uiElement.anchoredPosition = endPos;
    }
}

UI animations often use RectTransform for positioning UI elements.

Coroutines help create smooth animations over time without freezing the app.

Examples

This example fades out an image smoothly over 1 second.

Unity

// Fade UI Image
using UnityEngine;
using UnityEngine.UI;

public class UIFade : MonoBehaviour
{
    public Image image;

    void Start()
    {
        StartCoroutine(FadeOut());
    }

    System.Collections.IEnumerator FadeOut()
    {
        float duration = 1f;
        float elapsed = 0f;
        Color startColor = image.color;
        Color endColor = new Color(startColor.r, startColor.g, startColor.b, 0);

        while (elapsed < duration)
        {
            image.color = Color.Lerp(startColor, endColor, elapsed / duration);
            elapsed += Time.deltaTime;
            yield return null;
        }

        image.color = endColor;
    }
}

This makes a button grow bigger briefly when clicked, then return to normal size.

Unity

// Scale UI Button on Click
using UnityEngine;
using UnityEngine.UI;

public class ButtonScale : MonoBehaviour
{
    public RectTransform buttonRect;

    public void OnClick()
    {
        StartCoroutine(ScaleButton());
    }

    System.Collections.IEnumerator ScaleButton()
    {
        Vector3 originalScale = buttonRect.localScale;
        Vector3 targetScale = originalScale * 1.2f;
        float duration = 0.2f;
        float elapsed = 0f;

        while (elapsed < duration)
        {
            buttonRect.localScale = Vector3.Lerp(originalScale, targetScale, elapsed / duration);
            elapsed += Time.deltaTime;
            yield return null;
        }

        buttonRect.localScale = targetScale;

        // Return to original scale
        elapsed = 0f;
        while (elapsed < duration)
        {
            buttonRect.localScale = Vector3.Lerp(targetScale, originalScale, elapsed / duration);
            elapsed += Time.deltaTime;
            yield return null;
        }

        buttonRect.localScale = originalScale;
    }
}

Sample Program

This simple Unity script moves a UI element up by 100 units smoothly over 1 second when the scene starts.

Unity

using UnityEngine;
using UnityEngine.UI;

public class SimpleUIAnimation : MonoBehaviour
{
    public RectTransform uiElement;

    void Start()
    {
        StartCoroutine(MoveUI());
    }

    System.Collections.IEnumerator MoveUI()
    {
        Vector3 startPos = uiElement.anchoredPosition;
        Vector3 endPos = startPos + new Vector3(0, 100, 0);
        float duration = 1f;
        float elapsed = 0f;

        while (elapsed < duration)
        {
            uiElement.anchoredPosition = Vector3.Lerp(startPos, endPos, elapsed / duration);
            elapsed += Time.deltaTime;
            yield return null;
        }

        uiElement.anchoredPosition = endPos;
    }
}

Important Notes

Always use RectTransform for UI elements, not regular Transform.

Coroutines allow animations to run over time without freezing the app.

Test animations in the Unity Editor using Play mode and watch the UI move smoothly.

Summary

UI animations make interfaces feel alive and guide users.

Use coroutines and RectTransform to animate UI elements smoothly.

Simple animations include moving, fading, and scaling UI parts.