# Animation

The RadExpander control has an animation enabled by default.

To disable or enable the animation, set the **RadAnimationManager.IsAnimationEnabled** attached property on RadExpander.

#### **Example 1: Disabling animation in XAML**

```XAML
<telerik:RadExpander xmlns:telerikCore="using:Telerik.Core" telerikCore:RadAnimationManager.IsAnimationEnabled="False" />
```

#### **Example 2: Disabling animation in code**

```C#
RadAnimationManager.SetIsAnimationEnabled(this.radExpander, false);
```

## Customize Animations

To customize RadExpander's animations, use the **RadAnimationManager.AnimationSelector** property. The supported animation class is **ExpanderExpandCollapseAnimation** which exposes few properties to customize the animation.

* **Direction**: An enumeration property of type **AnimationDirection** which specifies the direction of the animation.
* **TargetElementName**: A property of type **string** that gets or sets the name of the element that should be animated.
* **AnimationName**: A property of type **string** that gets or sets the name of the animation. For example:
  * **ExpandDirection is set to Up or Down:** To modify the animation the AnimationName needs to be set to **Expand or Collapse**.
  * **ExpandDirection is set to Right or Left:** To modify the animation the AnimationName needs to be set to **ExpandHorizontal or CollapseHorizontal**.
* **SpeedRatio**: A property of type **double** that gets or sets the speed of the animation.

#### **Example 3: Modify the animations when ExpandDirection is Up or Down**

```XAML
<telerik:RadExpander>
	<telerikCore:RadAnimationManager.AnimationSelector>
		<telerikCore:RadAnimationSelector>
			<telerik:ExpanderExpandCollapseAnimation AnimationName="Expand" 
												Direction="In"
												SpeedRatio="0.2"
												TargetElementName="Content" />
			<telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse" 
												Direction="Out"
												SpeedRatio="0.2"
												TargetElementName="Content" />
		</telerikCore:RadAnimationSelector>
	</telerikCore:RadAnimationManager.AnimationSelector>
</telerik:RadExpander>
```

#### **Example 4: Modify the animations when ExpandDirection is Right or Left**

```XAML
<telerik:RadExpander ExpandDirection="Left">
	<telerikCore:RadAnimationManager.AnimationSelector>
		<telerikCore:RadAnimationSelector>
			<telerik:ExpanderExpandCollapseAnimation AnimationName="ExpandHorizontal" 
												Direction="In"
												SpeedRatio="0.2"
												TargetElementName="Content" />
			<telerik:ExpanderExpandCollapseAnimation AnimationName="CollapseHorizontal" 
												Direction="Out"
												SpeedRatio="0.2"
												TargetElementName="Content" />
		</telerikCore:RadAnimationSelector>
	</telerikCore:RadAnimationManager.AnimationSelector>
</telerik:RadExpander>
```

## See Also

* [Getting Started](https://www.telerik.com/winui/documentation/controls/radexpander/getting-started)
* [Expand Direction](https://www.telerik.com/winui/documentation/controls/radexpander/features/expand-direction)