---

title: AnimateWidth

---

# AnimateWidth

Renders a transition wrapping an element passed in the default slot and animating its width.

## Slots

| Name                 | Description                   | Bindings<br />(name - type - description) |
| -------------------- | ----------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Transition content | None                                      |

## Examples

The AnimateWidth component is intended to be used as a prop in animatable components but also works
as a transition to animate the width of an element.

### Used as a prop in an animatable component:

```vue
<template>
  <AnimatableComponent :animation="AnimateWidth" />
</template>

<script setup>
import AnimateWidth from "@empathyco/x-components/js/components/animations/animate-width.vue";
</script>
```

### Used as a regular Transition:

```vue
<template>
  <div>
    <button @click="visible = !visible">Toggle</button>
    <AnimateWidth>
      <div v-if="visible" style="width: 300px">Element to animate</div>
    </AnimateWidth>
  </div>
</template>

<script setup>
import { ref } from "vue";
import AnimateWidth from "@empathyco/x-components/js/components/animations/animate-width.vue";

const visible = ref(true);
</script>
```