@empathyco/x-components/docs/API-reference/api/x-components.animateclippath.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [animateClipPath](./x-components.animateclippath.md)

## animateClipPath() function

Returns a transition component to wrap an element passed in the default slot and animating its clip-path using inset and with the origin passed as parameter.

**Signature:**

```typescript
animateClipPath: (animationOrigin?: import("../create-directional-animation-factory").AnimationOrigin) => import("vue").DefineComponent
```

## Parameters

<table><thead><tr><th>

Parameter


</th><th>

Type


</th><th>

Description


</th></tr></thead>
<tbody><tr><td>

animationOrigin


</td><td>

import("../create-directional-animation-factory").AnimationOrigin


</td><td>

_(Optional)_ The origin of the animation. This means where the animation starts and ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.


</td></tr>
</tbody></table>

**Returns:**

import("vue").DefineComponent

A Transition Component.