---
title: Animation Effects
page_title: Animation Effects - Menu - Kendo UI Wrappers for React
description: "Customize the animation effects of the Kendo UI Menu wrapper for React."
slug: animations_menu
position: 5
---
# Animation Effects
The Menu enables you to display animation effects upon user interaction.
Each animation has a reverse option which, by default, is used for the closing effect and can be overridden by setting the [`close`](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu#configuration-animation.close) animation. Each animation has also a direction which can be set off the animation—for example, `slideIn:down`. The effects are part of the [Kendo FX](https://docs.telerik.com/kendo-ui/api/javascript/effects/common) namespace.
The following example demonstrates how to use the [`animation`](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu#configuration-animation) effects of the Menu.
{% meta height:460 %}
```html
```
```jsx-preview
class MenuContainer extends React.Component {
constructor(props) {
super(props);
this.dataSource = props.data;
this.state = {
selectedOption: 'slideIn-down'
};
}
handleOptionChange = (e) => {
debugger;
var animation = e.target.value.replace("-",":");
this.setState({
selectedOption: e.target.value
});
$("[data-role='menu']").data("kendoMenu").setOptions({
animation: {
open: {
effects: animation,
duration: 600
}
}
});
}
render() {
return (
);
}
}
ReactDOM.render(
,
document.querySelector('my-app')
);
```
{% endmeta %}
## Suggested Links
* [Kendo UI Menu for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/menu/overview)
* [API Reference of the Menu Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu)