# Animation

## Content

By default, when the `Value` of a gauge is changed, the pointer animates smoothly from the old value to the new one. This provides a natural, fluid transition between values.
In cases where this animation is not desired — for example, when values update very frequently or need to reflect changes instantly — set `IsAnimated="False"` to disable all animation. Value changes will then appear immediately without any transition.

### Customizing the Animation

The `UpdateAnimation` property allows you to customize the animation behavior when the gauge value changes. You can configure:

| @cols=1:**Property** | @cols=1:**Description** |
| -------- | ----------- |
| @cols=1:@rows=1:`Duration` | @cols=1:@rows=1:How long the animation takes to complete. |
| @cols=1:@rows=1:`StartDelay` | @cols=1:@rows=1:A delay before the animation begins. |
| @cols=1:@rows=1:`Easing` | @cols=1:@rows=1:The easing function that controls the acceleration curve of the animation. |

For example, the **Clock** sample demonstrates how to customize the easing so the seconds hand moves more realistically, using an `ElasticEase` to simulate the mechanical bounce of a real clock:

```auto
clockSecs.UpdateAnimation.Easing = new ElasticEase() { Oscillations = 1, Springiness = 4 };
```

>type=note
> **<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0">Note:</span>**<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0"> </span>`<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0">IsAnimated</span>`<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0"> is </span>`<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0">true</span>`<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0"> by default. Setting it to </span>`<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0">false</span>`<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0"> disables both the default animation and any custom </span>`<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0">UpdateAnimation</span>`<span data-loadable-vc-wrapper="true" data-ssr-placeholder-replace="Hm6N8:EfLS5:z8NN7:qz-Pe:OP-5u-0"> configuration.</span>


<br>
<br>
<br>
<br>
