Announcing USS transition

You may have seen that we recently added the transform properties and that these are more optimal for animations. This is put to the test with our new feature: USS Transitions!

These transitions are optimizing the creation of rich, interactive UIs based on UI Toolkit. The USS transitions, based on the CSS equivalent, offer a simple way to do some basic animations by offering a transition whenever the style changes. When set up, these are triggered regardless of the source of the change, whether it is a class added, a pseudo style change was applied or event the inline change was made in C#.

7689943--962116--transition example.gif

Here is a quick tutorial going over all the step to apply a transition in the UI builder.
https://discussions.unity.com/t/863467

This is a large feature, because it touches every USS property. We may have worked really hard to provide as much functionality as possible from day one, with as few exceptions as possible.

We have three different categories of property:

  • Fully animatable,
  • discrete animation only, and
  • not animatable

The fully animatable implies that the value will transition gradually from the previous value to the final one, at a speed that follows the easing function and transition duration. The discrete animation allows for changing a parameter, but in a single step from the initial value to the end value. This is usually a property that does not have an "in between" state, or the one that would be really difficult to animate, like the text alignment. Finally, not animatable do not support the transition framework at all. We think most frequent use cases are covered by the current implementation.

So here is what we are supporting:

drummroll

Fully animatable:
bottom; left; right; top;
color; background-color;
opacity;
flex; flex-basis; flex-grow; flex-shrink;
rotate; scale; translate; transform-origin;
height; width; max-height; min-height; max-width; min-width;
border-width; border-top-width; border-right-width; border-left-width; border-bottom-width;
border-radius; border-top-right-radius; border-top-left-radius; border-bottom-left-radius; border-bottom; -right-radius;
border-color; border-top-color; border-right-color; border-left-color; border-bottom-color;
margin; margin-bottom; margin-left; margin-right; margin-top;
padding; padding-bottom; padding-left; padding-right; padding-top;
letter-spacing; word-spacing; -unity-paragraph-spacing;
-unity-background-image-tint-color;
-unity-text-outline; -unity-text-outline-color; -unity-text-outline-width;
text-shadow;
-unity-slice-bottom; -unity-slice-left; -unity-slice-right; -unity-slice-top;

Discrete animation:
visibility;
background-image;
align-content align-items;
display;
flex-direction flex-wrap;
font-size;
justify-content;
overflow;
position;
text-overflow;
-unity-font-definition;
-unity-font;
-unity-background-scale-mode;
-unity-font-style;
-unity-overflow-clip-box;
-unity-text-align;
-unity-text-overflow-position;
white-space;

not animatable:
cursor;
transition; transition-delay; transition-duration; transition-property; transition-timing-function;

take a deep breath

In addition to that, we support many easing functions, variable transition durations and a configurable transition delay. This allows for modifying the look and feel of the transition as well as adjusting the sequence in which the transitions occur. Using the easing functions allows the discrete animation to be triggered at the beginning, the end or even in the middle of the transition.

There are so many new details with these features that the documentation needs to catch up. We still want to allow those who are familiar with the CSS equivalent to start using this new tool as soon as possible!

Under the hood is an event system that enables a lot of possibilities, that would be detailed in a future post.

Finally, we are still improving the performance and reducing the cost of transitioning for most frequently used properties.in futures version of Unity.

17 Likes

Hello dear developer,

is it / will it be possible to use these transitions already ingame (not only in the editor)? I would assume it to be possible, but it's better to be safe than sorry.
If so, what are / will be the requirements for the corresponding packages and the Unity version? (I have a faint memory of some UIToolkit features requiring the newest Unity alpha version at that time, but I could also be mistaken in this regard.)

I'm looking forward for a response, since transitions seem to me to be a very important feature in order to have nice ingame UIs (-> e. g. for button transitions).

Richard

[quote=“RichardWepner”, post:2, topic: 863464]
is it possible to use these transitions already ingame
[/quote]
Yes. They are fully available wherever you can use UI Toolkit.

[quote=“RichardWepner”, post:2, topic: 863464]
what are the requirements for the corresponding packages and the Unity version?
[/quote]
You need Unity 2021.2 or newer. There is no preview package needed anymore for the runtime part of unity.

1 Like

Hi @SimonDufour , will there (or is there) be a transitionend like events (run, start, cancel, end) for UI Toolkit? It'd be nice if we can track transitions with events (especially end event). I think we can use coroutines and reading visualelement's style.transitionDuration + style.transitionDelay, but this could easily cause some problems.

And, also, will there be a custom transitionTimingFunction (like cubic-bezier, steps in css; most likely with an AnimationCurve).

We have all of those events already! You can find them all in the API documentation for Unity 2021.2+ (here's the one for TransitionEndEvent for example).

There are many timing functions already, if you use the UI Builder you can see a complete list of them :)

1 Like

Well, @JuliaP_Unity , I have to dig more carefully in the documentation :smile: Thank you!

About the timing functions, I know there are many defined functions (haven't tried them all :sweat_smile:), but I believe the custom ones could make a big difference. For example, using an AnimationCurve as a timing function would give more unique possibilities. Don't get me wrong, 23 EasingMode is not less; but I believe the transitions/animations needs more freedom on timing to make them more unique/tasty. :)

2 Likes

[quote=“TeorikDeli_1”, post:6, topic: 863464]
About the timing functions, I know there are many defined functions (haven’t tried them all :sweat_smile:), but I believe the custom ones could make a big difference. For example, using an AnimationCurve as a timing function would give more unique possibilities. Don’t get me wrong, 23 EasingMode is not less; but I believe the transitions/animations needs more freedom on timing to make them more unique/tasty. :slight_smile:
[/quote]

Oh I had misread your original question, sorry about that! :sweat_smile:
For the moment, there’s no plan to make custom curves, but I’ll bring this feedback to the group!

1 Like

This should really be stickied so that its more visible, wasn't easy to find out about this. Great work on this guys.

1 Like

Wow, you're right @Chris-Trueman ... completely missed it! It's a huge feature and I wasn't even aware it was released!

Great job UITK Team!

1 Like

[quote=“Chris-Trueman”, post:8, topic: 863464]
This should really be stickied so that its more visible, wasn’t easy to find out about this. Great work on this guys.
[/quote]

For the record, this post is pinned to the top! We probably have too many pinned posts now though so I’ll bring that up with the team :sunglasses:

1 Like

[quote=“JuliaP_Unity”, post:10, topic: 863464]
For the record, this post is pinned to the top! We probably have too many pinned posts now though so I’ll bring that up with the team :sunglasses:
[/quote]
I think Unity has some documentation problem here :sweat_smile: There is no mention in the Manual for USS transitions (at least I couldn’t find in 2021.2 & 2022.2 manuals) and the Scripting API has no hierarchy, so it’s usually not easy to find things (grouping events, elements, etc. would be much more easier to find anything, at least in my opinion). :roll_eyes:

[quote=“TeorikDeli_1”, post:11, topic: 863464]
I think Unity has some documentation problem here :sweat_smile: There is no mention in the Manual for USS transitions (at least I couldn’t find in 2021.2 & 2022.2 manuals) and the Scripting API has no hierarchy, so it’s usually not easy to find things (grouping events, elements, etc. would be much more easier to find anything, at least in my opinion). :roll_eyes:
[/quote]

We’re aware and actively working on the manual for all new features! :sunglasses:

4 Likes

Is unity aware of some bugs related to transitions?

Here I'm rotating a picture and changing its color.
4m2co3

Here I'm changing the picture from a normal version to one with a yellow border.
2x38j7

Regarding first one it's not a bug. You are hovering corner of element and when it's rotating cursor appears out of boundary so :hover selector is not true anymore and then the next corner is going under cursor and :hover is true again and so on

1 Like

[quote=“Onigiri”, post:14, topic: 863464]
Regarding first one it’s not a bug. You are hovering corner of element and when it’s rotating cursor appears out of boundary so :hover selector is not true anymore and then the next corner is going under cursor and :hover is true again and so on
[/quote]
It’s also worth noting that this “not a bug” is somehow working almost perfectly on a web browser. It’s impossible to reproduce the same behavior the unity’s UI Toolkit gives out.

gmg51m

Does anybody know how to animate a "slide-out" menu? Would you make a css (uss) class with that animation, then somehow add it to that UI Element by script on button press?

[quote=“useraccount1”, post:15, topic: 863464]
working almost perfectly on a web browser
[/quote]
I tested firefox and chrome and I found different oddities with both :slight_smile: But their behavior is definitely different as they do not calculate the style as long as the mouse does not move again or that another event trigger a refresh of the styles.

Something that could help you would be to override the ContainsPoint method to be set based on a measure of the distance from the center of the element. This make the hover constant during the rotation and prevent any jitter. You could probably also return the last result while the transition is running using transition events.

[quote=“StripeGuy”, post:16, topic: 863464]
Does anybody know how to animate a “slide-out” menu?
[/quote]

You would require more than just a uss class to manage the button press and set a few states, but it is absolutely doable.
Assuming that the element could be behind something on the first frame, I would animate the translate by left shifting the menu by 120% using two style:

Menu : always on the element, set the Transition-property and transition duration here
MenuHidden with translate -100% , 0

When the button is pressed, you then just remove the MenuHidden class from your visual element.

If you are targeting greatly varying aspect ratio, I sometime add a shorter transition on the opacity to hide the initial position of the element.

Merci Simon! Good to see another french-canadian on here :p

I tried your method of having 2 classes on the element and removing the "hidden" class on button press, but the "menu" just instantly appears and doesn't animate for some reason.

Edit: Nevermind. I got it working! I used Percentage instead of pixels, but on the original " menu" it was set to 0px instead of 0%. I guess Unity couldn't do that math, haha.

I guess the only question I would have is what is the best way to "toggle" it with the same button? Is there a way to check if a class is on the element?

[quote=“StripeGuy”, post:18, topic: 863464]
0px instead of 0%
[/quote]
:expressionless: this should work. I tested it myself a few times, and we do handle 0px as 0% and vice versa for both the initial or final style. If you are able to reproduce this, please report a bug in unity with a repro project because there is something I seem to ignore.

[quote=“StripeGuy”, post:18, topic: 863464]
best way to “toggle”
[/quote]
GetClasses could be helpfull to test if the class is set and change the state accordingly, but I just saw that there is a ToggleInClassList in the API. I personally never used it, but I think it should do what you are looking for!

[quote=“SimonDufour”, post:19, topic: 863464]
:expressionless: this should work. I tested it myself a few times…
[/quote]

Hmm, then it must have been something else I messed up but fixed. I tried a few different things when it wasn’t working, and that’s one of the things that I fixed. Oh well, it worked in the end :slight_smile:

[[quote=“SimonDufour”, post:19, topic: 863464]

[/quote]](https://docs.unity3d.com/ScriptReference/UIElements.VisualElement.GetClasses.html)[quote=“SimonDufour”, post:19, topic: 863464]
… but I just saw that there is a ToggleInClassList in the API. I personally never used it, but I think it should do what you are looking for!
[/quote]

Thanks so much! That worked wonderfully. Just called a function with these in it:

VisualElement.ToggleInClassList("menu-show")
VisualElement.ToggleInClassList("menu-hide")

Then I just created those classes in the “builder” and assigned the appropriate animations/translations to the them. I add only the “menu-hide” class to menu element, and that’s it. The function simply “toggles” between the classes when it gets called.

1 Like