---
title: Animation Effects
page_title: Animation Effects - PanelBar - Kendo UI for Vue
description: "Animate the Kendo UI PanelBar wrapper for Vue."
slug: animation_effects_panelbar_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/layout/panelbar/animations/"
position: 4
---

<div><WrapperBanner link="/kendo-vue-ui/components/layout/panelbar/animations"></WrapperBanner></div>    

# Animation Effects

By default, the PanelBar uses animations to expand and reveal sub-items when the user clicks an item header.

To modify the PanelBar animations, use the `expand` and `collapse` properties.

{% meta height:800 %}
{% embed_file panelbar/animation/main.vue preview %}
{% embed_file panelbar/animation/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI PanelBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/panelbar/overview)
* [API Reference of the PanelBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)