# Animations

The Badge loads with an animation and plays an animation when it is updated (changed).

By default, the load and change animations are of the `FadeAnimation` type. To modify the animations of the Badge, use the `RadAnimationManager.AnimationSelector` property. Depending on the animation you need to change, you have to specify the `AnimationName` property to either `LoadAnimation` or `ChangeAnimation`.

The following example uses the `xmlns:core="using:Telerik.UI.Xaml.Controls"` , `xmlns:animation="using:Telerik.Core"`, and `xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"` namespaces.

#### **Modify the Badge Animations**

```XAML
<primitives:RadBadgeView BadgePosition="1, 1" BadgeAnchorPosition="0, 0.5" Margin="20 50 20 0">
	<Button Content="button" Width="60" Height="30"/>
	<primitives:RadBadgeView.Badge>
		<primitives:RadBadge x:Name="badgeButton" Background="Orange" Content="678" Geometry="{core:Geometry Type=Ellipse}" Width="36" Height="24" >
			<animation:RadAnimationManager.AnimationSelector>
				<animation:RadAnimationSelector>
					<animation:RadScaleAnimation AnimationName="LoadAnimation" StartScaleX="0.1" EndScaleX="1.0" StartScaleY="0.1" EndScaleY="1.0" />
					<animation:RadScaleAnimation AnimationName="ChangeAnimation" StartScaleX="0.1" EndScaleX="1.0" StartScaleY="0.1" EndScaleY="1.0" />
				</animation:RadAnimationSelector>                            
			</animation:RadAnimationManager.AnimationSelector>
		</primitives:RadBadge>
	</primitives:RadBadgeView.Badge>
</primitives:RadBadgeView>
```

## See Also

* [Styling Options](https://www.telerik.com/winui/documentation/controls/radbadge/styling)
* [Badge Types](https://www.telerik.com/winui/documentation/controls/radbadge/types)