Resolved UI Toolkit runtime UI animation

Currently seems like UI Toolkit runtime UI animation only have simple UI animation feature. Is there any ETA and plan to implement better and feature rich runtime UI animation and tooling that able to create complex animation? I would like to see tween animation tooling integrates into UI Toolkit runtime UI to enable high performance complex animation.

 

What do you mean by "tween animation tooling"?

In code, you can use LeanTween and similar libs (or plain coroutines) to interpolate from one value to another over time.
Example:

Code (CSharp):

1.  LeanTween.value(gameObject, 0, 1, 0.3f) // Animate value from 0 to 1 in 0.3 seconds
2.             .setOnUpdate((float interpolatedValue) => // This is called every frame
3.             {
4.                 visualElement.style.opacity = interpolatedValue;
5.                 // Set other values as you please, scale, rotate, ...
6.             })
7.             .setOnComplete(() => visualElement.RemoveFromHierarchy()) // This is called when the animation is complete
8.             .setEaseInSine(); // Use a nice (non-linear) curve for the interpolation
9.  

Of course, Unity could provide more advanced, visual animation tooling like Animator and friends that can record, save and replay arbitrary animations based on keyframes and state machines. I imagine that such a tooling is a must-have for non-coders.
Is this planned? Or maybe could existing Unity tooling be re-used to animate VisualElements?

 

I expect something UI designer friendly visual editor like DOTween Pro but better than DOTween Pro so non-coder can create complex UI animation without involving programmer. You can say it's supercharged Animator that using tween way to do UI animation.

 

Something like this but even better that it's a complete tooling without needing to involve any programmer. I expect even more integrated features that it will support Addressables by default out of the box and it will auto load and unload ui panels when out of camera screen.

Spoiler

 

Just a note for future me and others. If you use transitions in your USS, you can add classes to animate after X ms using this function:

UiHelpers.cs

Code (CSharp):

1. public static class UiHelpers
2.     {
3.         public static void DelayAddToClassList(VisualElement ui, string classToAdd = "animate", int delay = 100)
4.         {
5.             ui.schedule.Execute(() => ui.AddToClassList(classToAdd)).StartingIn(delay);
6.         }
7.     }

Usage in C#:

Code (CSharp):

1. UiHelpers.DelayAddToClassList(ui);

And some transition declaration i USS:

Code (USS):

1. .button {
2.     transition-property: translate opacity;
3.     transition-timing-function: ease-out linear;
4.     transition-duration: 0.3s 0.3s;
5.     transition-delay: 0.2s 0.2s;
6.     translate: -10 0;
7.     opacity: 0;
8. }
9. .button.animate {
10.     translate: 0 0;
11.     opacity: 1;
12. }

 

One more opinion: Since you try to replicate CSS already with providing CSS-like or equal properties via USS, users are expecting an identical feature set provided by USS (at least at some point in time). Wrt. animations this would mean the ability to define animations in USS (also with keyframes) as explained, e.g., in the Mozilla docs

https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

 

Imagine setting the position in this approach
uiElement.style.translate = new StyleTranslate(new Translate(val, 0, 0));
Here we have to create 2 new structs every update. not the optimized way of tweeting.

 

I recently released a package that adds support to Timeline for animating UI Toolkit, you might find it useful: https://github.com/mihakrajnc/UITTimeline

Still in early stages, currently supports transform, opacity, visibility, display, and adding / removing classes, but I'll be adding more styles and optimisations in the coming weeks.