Official Announcing USS transition

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

 

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).

 

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

About the timing functions, I know there are many defined functions (haven't tried them all ), 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.

 

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

 

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!

 

I think Unity has some documentation problem here 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).

 

Is unity aware of some bugs related to transitions?

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

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

 

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

 

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.

 

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?

 

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

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?

 

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

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

Code (CSharp):

1. VisualElement.ToggleInClassList("menu-show")
2. 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.

 

So it happened again that it wasn't working, then noticed it went back to px instead of %. Looks like whenever I shutdown unity and restart it, it goes back to pixels (that one element class only - ".showmenu"). The other stays at %. And when it's at 0px (translation Y btw), it doesn't animate. I have to put it back to percentage then it works. I can reproduce it every time.

I am using Unity 2021.2.8f1. Where should I report this bug?

Edit: This is a bigger issue than I thought. It's an issue where it doesn't put the "%" in the .uss class file of ANY property that is at "0", so when you restart unity and it sets all the values from your uss file, it won't know it's a percentage, so it defaults to px. And it seems to only not animate properly if it's "100% -> 0px", and works if it's "0px -> 100%" for example. Anyway, I submitted the bug and we'll see if they fix it, cause it's an absolute pain to go in all my animation to change it to % everytime I open my project to work on it.

 

Salut Simon,

The transitions work beautifully however I am hitting a wall trying to programmatically define the end value for a transition.

In short, I toggle a 'hover-active' class in C# on a visualElement. The class only has a width value changed. That works, no issues.

However, I want in C# to dynamically change that width before triggering the animation (or at start, whatever works). Is it possible to change the target value that a transition will animate to by code and not in USS? Right now, setting the width before just changes the width directly without doing any transition.

Code (CSharp):

1.  
2. m_backBtnBG.style.width = new Length(500, LengthUnit.Pixel);
3. m_backBtnBG.style.transitionDelay = new List<TimeValue>() { new TimeValue(0, TimeUnit.Millisecond) };
4. m_backBtnBG.style.transitionProperty = new List<StylePropertyName>() {  new StylePropertyName("width") };
5. m_backBtnBG.style.transitionDuration = new List<TimeValue>() { new TimeValue(500, TimeUnit.Millisecond) };
6. m_backBtnBG.AddToClassList("hover-active");

If not, how should we tackle this?

EDIT: Disregard.
You have to make sure the value in the class (width) is actually set (not unset) first and then you can define the width. Doh.

 

This is a really terrific feature, thank you so much, I was able to bring my UI to glorious animation with very little code.

The only thing missing is the ability to loop animations. For example for pulsing buttons.

 

How do I temporarily disable a transition on an element?I tried using `element.RemoveFromClassList("transition_class");` and then later `element.AddToClassList("transition_class");`. Transitions do get disabled, but they fail to work after 'm adding the class back, despite the class being actually present on the element which can be seen in the debugger.

Any other (working) way disabling and re-enabling transitions?

 

My issue is the transition is not triggered by changing inline style after I removed the class containing the transition and then added it back. Maybe I should wait a bit after adding the class back before I try to trigger the transition from changing inline style property?

Can't test more right now as I borked my code.

 

Thank you, the following works:

1. remove transition containing class from element
2. do style changes I don't want animated
3. add the class back to the element
4. wait for next frame
5. do style changes that should be animated

So, item 4 was necessary.

 

can anyone make a simple video how to make animations?

 

Wanted to ask if it's intentional that we cannot use the transition property with ID selectors or if it's a bug? (Unity 2021.3.3f1)

Toggeling the .animate class on #element won't work, nothing happens:

Code (CSharp):

1. #element {
2.     opacity: 0;
3.     transition-property: opacity;
4.     transition-duration: 1s;
5. }
6.  
7. .animate {
8.     opacity: 1;
9. }

While toggeling .animate on .element will work as intended:

Code (CSharp):

1. .element {
2.     opacity: 0;
3.     transition-property: opacity;
4.     transition-duration: 1s;
5. }
6.  
7. .animate {
8.     opacity: 1;
9. }

I've already tripped over this a few times, wondering why an animation didn't want to work as I like to use ID selectors for elements that only exist once and are unique.

Thanks

 

Thanks for the reminder and explanation, I somehow skipped the whole selector specificity when I thought about why it didn't work It does make sense.

 

Is there a bug when animating the height property via ToggleInClassList? It seems like height gets treated as a discrete animation property in this case (Unity 2021.3.0f1)

 

Great feature!

Here's some c# code that does the slide-out thing that @StripeGuy asked about earlier in the thread. There were some nuances to doing this that were hard for me using uss and I found the c# easier to work with. You can just paste these functions into a script that contains your UiDocuments. Shouldn't need any additional uss. The main functions being demonstrated are PanelTransitionLeftToRight and PanelTransitionRightToLeft.

Code (CSharp):

1.  
2. // Assuming the startPanel is visible and we want to transition to the endPanel from left to right
3. void PanelTransitionLeftToRight(UiDocument startPanel, UiDocument endPanel, float duration)
4. {
5.     HidePanel(endPanel);
6.     PanelRight(endPanel, 0f);
7.     PanelLeft(startPanel, duration);
8.     ShowPanel(endPanel);
9.     PanelCenter(endPanel, duration);
10. }
11.  
12. // Assuming the startPanel is visible and we want to transition to the endPanel from right to left
13. void PanelTransitionRightToLeft(UiDocument startPanel, UiDocument endPanel, float duration)
14. {
15.     HidePanel(endPanel);
16.     PanelLeft(endPanel, 0f);
17.     PanelRight(startPanel, duration);
18.     ShowPanel(endPanel);
19.     PanelCenter(endPanel, duration);
20. }
21.  
22. void HidePanel(UiDocument panel)
23. {
24.     panel.rootVisualElement.style.display = DisplayStyle.None;
25. }
26.  
27. void ShowPanel(UiDocument panel)
28. {
29.     panel.rootVisualElement.style.display = DisplayStyle.Flex;
30. }
31.  
32. void SetAnimationTransitionDuration(UiDocument panel, float seconds)
33. {
34.     panel.rootVisualElement.style.transitionDuration = new List<TimeValue>() { new TimeValue(seconds, TimeUnit.Second) };
35. }
36.  
37. void SetAnimationTransitionPosition(UiDocument panel, float x, float y)
38. {
39.     panel.rootVisualElement.style.translate =
40.         new StyleTranslate(new Translate(new Length(x, LengthUnit.Percent), new Length(y, LengthUnit.Percent), 0));
41. }
42.  
43. void PanelCenter(UiDocument panel, float duration)
44. {
45.     SetAnimationTransitionDuration(panel, duration);
46.     SetAnimationTransitionPosition(panel, 0f, 0f);
47. }
48.  
49. void PanelRight(UiDocument panel, float duration)
50. {
51.     SetAnimationTransitionDuration(panel, duration);
52.     SetAnimationTransitionPosition(panel, 100f, 0f);
53. }
54.  
55. void PanelLeft(UiDocument panel, float duration)
56. {
57.     SetAnimationTransitionDuration(panel, duration);
58.     SetAnimationTransitionPosition(panel, -100f, 0f);
59. }
60.  

 

Hi. Is it possible to create custom easing functions for transitions?

 

Hello, I keep getting this error when using uss animations/transitions.




Is this a bug or am I doing something wrong?

 

@SimonDufour @jakob-leitner Could be related to https://forum.unity.com/threads/animation-transition.1325598/

I'm getting that error as well when additively loading scenes. A reasonable workaround should be to explicitly kill ongoing transitions. But I can't find any public API to do that yet.

 

@SimonDufour @Singtaa I'll try that workaround right away And yes, the link you provided seems to describe exactly the same issue (IssueID: UUM-13155).
(UnityVersion: 2022.1.13f1)

 

Is there a way to have a transition when I remove a class?

Like for tab buttons, when I'm selecting between tabs I add a "selected" class. There's a transition when it's added but not when it's removed.

 

It is just like CSS. If you put your transition property on the tab's itself, it'll be transitioned when you add or removed class.

Code (CSharp):

1. .tab {
2.   transition: 0.5s;
3.   color: red;
4. }
5. .selected {
6.   color:black;
7. }

 

Hi @SimonDufour , is there a way to use transitions for CustomStyleProperties? I successfully added skewing a rounded box (which I will share in this thread) and I am trying to add transition to skew properties (added --skew-x and --skew-y CSS properties). I don't want to use Coroutines, if there is a way in the UI Toolkit.

 

Thanks! It is that simple.

 

Unfortunately it looks like in 2021.3 you can only have one selector with a transition running at a time. I wanted to transition between menus with 0.3s opacity fadeout and 1.2s for the menu to translate 100% off screen. If the opacity and translation are handled by different selectors and you add them at the same time, then nothing happens at all, as here:

Code (CSharp):

1. .hide-right-opacity {
2.     opacity: 0;
3.     transition-property: opacity;
4.     transition-duration: 0.3s;
5. }
6.  
7. .hide-right-translate{
8.     translate: 100%, 0;
9.     transition-property: translate;
10.     transition-duration: 1.2s;
11. }

If you let both selectors handle both opacity and translation, then whichever is added last overrides the duration for both, as here:

Code (CSharp):

1. .hide-right-opacity {
2.     opacity: 0;
3.     transition-property: opacity, translate;
4.     transition-duration: 0.3s;
5. }
6.  
7. .hide-right-translate{
8.     translate: 100%, 0;
9.     transition-property: opacity, translate;
10.     transition-duration: 1.2s;
11. }

I'll have to make a parent element for each individual effect I want running on separate transition durations it looks like.