Animation of UI elements

Hello, is it possible to apply animations—such as changing scale, moving, or rotating over a certain period of time—to an entity whose UI element layout type is set to overlay? I am imagining behavior similar to what can be achieved using CSS transitions or animations.

It should be possible with CustomPropertyAnimation, check out the example here in Putt Putt Paradise.

@GeorgeButler

Thank you for your response. Also, thank you for sharing the example. I will review it and try to implement the animation as expected. If I have any questions, I will contact you.

@GeorgeButler

When I tried to animate both the top and left properties simultaneously as shown below, only the left animation works as described later. Is there a way to run animations on separate properties simultaneously?

ecs.CustomPropertyAnimation.set(world, eid, {
          attribute: 'ui',
          property: 'top',
          from: 0,
          to: 300,
          duration: 1000,
          loop: true,
        })
ecs.CustomPropertyAnimation.set(world, eid, {
          attribute: 'ui',
          property: 'left',
          from: 0,
          to: 500,
          duration: 1000,
          loop: true,
        })

@GeorgeButler

Sorry for the continuous questions, but is it possible to change the rotation of the UI element that has the layout type set to Overlay? Even when I set it in the inspector or try to rotate it dynamically using CustomPropertyAnimation, there’s no change.

Not possible at the moment, however I’ve let the team know that this is something we should add.

@GeorgeButler

I wanted to create an effect where an entity with its layout type set to ‘overlay’ rotates and falls to the bottom left and bottom right, but it’s unfortunate that it’s not possible. I would appreciate it if you could address this quickly. If you have any alternative solutions in mind, I would appreciate it if you could let me know.

You can’t do rotate but you can animate the position.

@GeorgeButler

I would appreciate it if you could share the method.