Create looping transitions

Version: 2021.3+

This example demonstrates how to leverage the TransitionEndEvent to create transitions that loop.

Example overview

This example demonstrates two looping animations:

Yo-yo: The loop starts from state A to state B with transition, and then return back to state A with transition.
A-to-B: The loop starts from state A to state B with transition, and then return back to state A without transition.

Window shows a yo-yo and a A-to-B loop transition effects

You can find the completed files that this example creates in this GitHub repository.

Prerequisites

This guide is for developers familiar with the Unity Editor, UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary Toolkit, and C# scripting. Before you start, get familiar with the following:

Create the example

Create a project in Unity with any template.
In your Project windowA window that shows the contents of your Assets folder (Project tab) More info
See in Glossary, create a folder named loop-transition-example.
Right-click in the folder, and select Create > UI Toolkit > Editor Window.
In the UI Toolkit Editor Window Creator window, enter LoopingExample.
Save your changes. This creates three files as LoopingExample.cs, LoopingExample.uss, and LoopingExample.uxml.

Replace LoopingExample.cs with the following content:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class LoopingExample : EditorWindow
{
    [SerializeField] private VisualTreeAsset m_VisualTreeAsset = default;
    private Label _yoyoLabel;
    private Label _a2bLabel;
    [MenuItem("Window/UI Toolkit/Transition Looping Example")]
    public static void ShowExample()
    {
        var wnd = GetWindow<LoopingExample>();
        wnd.titleContent = new GUIContent("TransitionStyle");
    }
    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        VisualElement asset = m_VisualTreeAsset.Instantiate();
        root.Add(asset);
        SetupYoyo(root);
        SetupA2B(root);
    }
    // This method powers the yo-yo loop.
    private void SetupYoyo(VisualElement root)
    {
        _yoyoLabel = root.Q<Label>(name: "yoyo-label");
        // When the animation ends, the callback toggles a class to set the scale to 1.3 
        // or back to 1.0 when it's removed.
        _yoyoLabel.RegisterCallback<TransitionEndEvent>(evt => _yoyoLabel.ToggleInClassList("enlarge-scale-yoyo"));
        // Schedule the first transition 100 milliseconds after the root.schedule.Execute method is called.
        root.schedule.Execute(() => _yoyoLabel.ToggleInClassList("enlarge-scale-yoyo")).StartingIn(100);
    }
    // This method powers the A-to-B cycle.
    private void SetupA2B(VisualElement root)
    {
        _a2bLabel = root.Q<Label>(name:"a2b-label");
        _a2bLabel.RegisterCallback<TransitionEndEvent>(evt =>
        {
            _a2bLabel.RemoveFromClassList("enlarge-scale-a2b");
            _a2bLabel.schedule.Execute(() => _a2bLabel.AddToClassList("enlarge-scale-a2b")).StartingIn(10);
        });
        _a2bLabel.schedule.Execute(() => _a2bLabel.AddToClassList("enlarge-scale-a2b")).StartingIn(100);
    }
}

Replace LoopingExample.uxml with the following content:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" 
         xsi="http://www.w3.org/2001/XMLSchema-instance" 
         engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" 
         noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" 
         editor-extension-mode="False">
    <Style src="LoopingExample.uss" />
    <ui:VisualElement name="container">
        <ui:VisualElement>
                <ui:Label text="Yo-yo Transition" name="yoyo-label" class="text-style" />
        </ui:VisualElement>
        <ui:VisualElement>
                <ui:Label text="A-to-B Transition" name="a2b-label" class="text-style"/>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

Replace LoopingExample.uss with the following content:

    #yoyo-label{
        transition-duration: 3s;
    }

    .text-style {
        font-size: 20px;
        flex-grow: 0;
        margin: 20px; 
    }

    .enlarge-scale-a2b{
        scale: 1.5 1.5;
        transition-duration: 3s;
    }
        
    .enlarge-scale-yoyo{
        scale: 1.5 1.5;
    }

    #container{
        flex-grow:1;
        justify-content: space-around;
        align-items: center;
    }

To test the example, from the menu, select Window -> UI Toolkit -> Transition Looping Example.

Additional resources

Create a transition event

Support for Editor UI