# Smooth movement on Moving Analog Indicator

**URL:** <https://forum.inductiveautomation.com/t/smooth-movement-on-moving-analog-indicator/114426>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [March 10, 2026, 9:08pm UTC](https://forum.inductiveautomation.com/t/smooth-movement-on-moving-analog-indicator/114426 "2026-03-10T21:08:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bushmatic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bushmatic/32/87014_2.png) [@Bushmatic](https://forum.inductiveautomation.com/u/Bushmatic)\
**Post date:** [March 10, 2026, 9:08pm UTC](https://forum.inductiveautomation.com/t/smooth-movement-on-moving-analog-indicator/114426/1 "2026-03-10T21:08:11Z")

</div>

We have a handful of moving analog indicators bound to analog values coming from OPC tags. These of course are polled, so true realtime analog movement won’t be possible on the indicator. But I’m wondering if there’s a visual trick I can use to smooth the indicator’s sliding movements on the GUI as a visual thing only. We find the arrow to be a little jarring and appearing ‘laggy’ due to the nature of the polled tags it is bound to. If there were some way to at least let the arrow slide along the axis smoothly, I think that would make our display a bit easier on the eyes.

I understand some CSS may be required, which is fine. Open to any and all ideas.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/765b0aec44af207bf8f356dd29423100c598d838.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 10, 2026, 9:55pm UTC](https://forum.inductiveautomation.com/t/smooth-movement-on-moving-analog-indicator/114426/2 "2026-03-10T21:55:30Z")

</div>

I can do it in the browser Development Tools by selecting the indicator and adding the transition property.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b99d433f84089a97270ca6511a772ee448849041.png)

I don't know where to add this in Designer to apply it to the component. It might be in the Advanced Stylesheet.

---

<div class="post-metadata">

**Author:** ![dgillbee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dgillbee/32/73838_2.png) [@dgillbee](https://forum.inductiveautomation.com/u/dgillbee)\
**Post date:** [March 11, 2026, 6:24am UTC](https://forum.inductiveautomation.com/t/smooth-movement-on-moving-analog-indicator/114426/3 "2026-03-11T06:24:34Z")

</div>

Add a style into the advance style sheet

```css
.psc-animate *{
	transition: all 1s ease;
}

```

Then add the class to the analog indicator

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/6/b6cf96dba8b1fb044b32d610c553e57d4b284bdd.png)

Change the `1s` to smaller to make the arrow move faster

---

<div class="post-metadata">

**Author:** ![Bushmatic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bushmatic/32/87014_2.png) [@Bushmatic](https://forum.inductiveautomation.com/u/Bushmatic)\
**Post date:** [March 11, 2026, 2:43pm UTC](https://forum.inductiveautomation.com/t/smooth-movement-on-moving-analog-indicator/114426/4 "2026-03-11T14:43:12Z")

</div>

Thank you both! This got me where I needed. I ended up adding this to my stylesheet, which saved me needing to set any `classes` on the analog indicator:

```css
.ia_movingAnalogIndicatorComponent__wedgeIndicator {
    transition: transform 0.4s ease-out;
}

```