# Animation of UI elements

**URL:** <https://forum.8thwall.com/t/animation-of-ui-elements/8273>\
**Category:** Technical Support\
**Tags:** ui, studio\
**Created:** [September 12, 2025, 10:11am UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273 "2025-09-12T10:11:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yusuke\_Mizutani](https://avatars.discourse-cdn.com/v4/letter/y/a587f6/32.png) [@Yusuke\_Mizutani](https://forum.8thwall.com/u/Yusuke_Mizutani)\
**Post date:** [September 12, 2025, 10:11am UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273/1 "2025-09-12T10:11:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [September 12, 2025, 5:15pm UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273/2 "2025-09-12T17:15:16Z")

</div>

It should be possible with CustomPropertyAnimation, check out the example here in [Putt Putt Paradise.](https://www.8thwall.com/8thwall/putt-putt-paradise/code/PlayerControls.ts#L203)

---

<div class="post-metadata">

**Author:** ![Yusuke\_Mizutani](https://avatars.discourse-cdn.com/v4/letter/y/a587f6/32.png) [@Yusuke\_Mizutani](https://forum.8thwall.com/u/Yusuke_Mizutani)\
**Post date:** [September 16, 2025, 7:15am UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273/3 "2025-09-16T07:15:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Yusuke\_Mizutani](https://avatars.discourse-cdn.com/v4/letter/y/a587f6/32.png) [@Yusuke\_Mizutani](https://forum.8thwall.com/u/Yusuke_Mizutani)\
**Post date:** [September 17, 2025, 4:07am UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273/4 "2025-09-17T04:07:31Z")

</div>

@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?

```typescript
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,
        })

```

---

<div class="post-metadata">

**Author:** ![Yusuke\_Mizutani](https://avatars.discourse-cdn.com/v4/letter/y/a587f6/32.png) [@Yusuke\_Mizutani](https://forum.8thwall.com/u/Yusuke_Mizutani)\
**Post date:** [September 17, 2025, 4:23am UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273/5 "2025-09-17T04:23:21Z")

</div>

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

 ![スクリーンショット 2025-09-17 13.15.05](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/6/638e969cb85f54979ae16ed65e61312491bd776f.png)

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [September 17, 2025, 6:08pm UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273/6 "2025-09-17T18:08:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Yusuke\_Mizutani](https://avatars.discourse-cdn.com/v4/letter/y/a587f6/32.png) [@Yusuke\_Mizutani](https://forum.8thwall.com/u/Yusuke_Mizutani)\
**Post date:** [September 18, 2025, 2:34am UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273/7 "2025-09-18T02:34:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [September 18, 2025, 6:05pm UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273/8 "2025-09-18T18:05:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Yusuke\_Mizutani](https://avatars.discourse-cdn.com/v4/letter/y/a587f6/32.png) [@Yusuke\_Mizutani](https://forum.8thwall.com/u/Yusuke_Mizutani)\
**Post date:** [September 19, 2025, 1:01am UTC](https://forum.8thwall.com/t/animation-of-ui-elements/8273/9 "2025-09-19T01:01:35Z")

</div>

@GeorgeButler

I would appreciate it if you could share the method.