[Package] Timeline support for UI Toolkit

Hey everyone, I just released a package that adds support for animating VisualElements with Timeline:

We’ve recently had a need to add more VFX / animations to our UI, and needed to give more power to our animators than the standard USS transitions provide (e.g. keyframing).

The package is in very early stages but has proven to be very useful so far, so I’ve decided to officially release in the hopes it may prove useful to more people / animators out there.

It contains a timeline track and clips that allow you to select and animate VisualElements - all transform values are supported, in addition to some commonly used styles, like Opacity, Visibility, and Display. It also allows adding / removing classes directly from Timeline. The selector syntax is similar to the way selectors work in Unity Style Sheets (USS).

I would appreciate any advice / opinions / feature requests you may have!

7 Likes

Nicely done.

For improved performance, it might be useful to enable some specific UsageHints depending on which properties are being animated.

Right it looks like only DynamicTransform and GroupTransform would apply to what your package supports.

Thanks! And good idea, initially I thought of producing a warning if a hint that should be turned on but isn’t, but yeah I don’t see why not just enable it directly. I will also add clips for animating color-based properties in the near future where DynamicColor could also be used.

Is there any downside in enabling hints during runtime (e.g. in OnGraphStart) vs directly in UXML?

I would say the main downside is that the UI author might have more information about which hints to enable or disable, so having a way to disable the automatic usage hints might be nice (for advanced users).

Good point, will add an option to disable it, thanks!

@antoine-unity Got two questions regarding optimizations, if you could help me out.

First about UsageHints, the documentation says that you shuld not be able to change them after a VE is added to a panel:
This property can only be set when the VisualElement is not yet part of a Panel. Once part of a Panel, this property becomes effectively read-only, and attempts to change it will throw an exception.

However this does not appear to be the case. If I delay the start of my graph to after the panel is initialized / rendered, and set usageHints on the visual elements it’s animating (in OnGraphStart), I don’t get any errors.
Does this mean that setting usageHints after an element is part of a panel doesn’t work and the error just isn’t showing up properly, or that you can set usageHints after an element is added, and the documentation is incorrect?

Second questions is, is there any performance downside in setting style values on every frame, even if the value doesn’t change? I’m wondering if I should check if the value changes from what’s currently set on the element, before setting it, or if visual elements do that internally. The more style values I support the bigger the problem gets. Currently I just set everything on every frame, even if you don’t have that specific clip in your track, but that will need to change sooner rather than later, especially as I start adding support for more styles.

For transform specifically, I can see that, e.g. VisualElement.transform.position is basically just a shortcut for style.translate:

this.style.translate = (StyleTranslate) new Translate((Length) value.x, (Length) value.y, value.z);

I can improve my mixer there so that I set style.translate directly instead of going via transform.position, for example, and create / reuse the Translate struct myself. But even with that, if I set the same Translate struct without any changes to its values on every frame, is that bad?

You are right that the documentation for usageHints needs an update, since we lifted that limitation some time ago. Thanks for reporting!

About writing style values every frame, I think there might be a small downside yes. We currently don’t seem to be checking if the value is different. I would recommend profiling it and decide after it’s something you’d need to optimize.

1 Like

I added an English video.


Wow, It’s what I’v been looking for!
Key-framed animation and sequencing is one of the essential features the UI Toolkit still lacks.
I’ve made a short YouTube video for Korean UI artists which shows how to animate in the UI Toolkit with your UIT Timeline.

I wish your project would stimulate the never-ending UI toolkit development.
Thank you very much for your effort and sharing your project.

3 Likes

Oh wow that’s amazing, thank you so much for putting in the effort to bring this to a wider audience! If there’s any specific features you / your community would like to see don’t hesitate to ask.

My current plan is to add support for animating colors next (background / tint), which will hopefully be in in the next week or so.

1 Like