# AnimComponentElement

Class · extends [`ComponentElement`](https://api.playcanvas.com/web-components/classes/ComponentElement.md)`<AnimComponent>` · category: Components

Source: https://github.com/playcanvas/web-components/blob/252f001881302c266c8d727044408c32be2bb5e7/src/components/anim-component.ts#L58

The AnimComponentElement interface provides properties and methods for manipulating
[`<pc-anim>`](https://developer.playcanvas.com/user-manual/web-components/tags/pc-anim/) elements.
The AnimComponentElement interface also inherits the properties and methods of the
[HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface.

The element drives animation clips over the host entity's hierarchy. Clips come from
`<pc-anim-clip>` children — or, when the element is a direct child of a `<pc-model>` and
declares no clips, every animation of that model's container asset is assigned, named by track
name, in container order. The first clip plays automatically (opt out with `activate="false"`);
switch clips declaratively through the `clip` attribute, or imperatively through [play](https://api.playcanvas.com/web-components/classes/AnimComponentElement.md#play)
and [transition](https://api.playcanvas.com/web-components/classes/AnimComponentElement.md#transition). Tracks bind to scene nodes by name, so any hierarchy whose node names
match a clip's curves can be animated — a model's skeleton is simply the common case.

The engine reports no clip completion: a non-looping clip holds its last pose silently. Poll
the underlying [AnimComponent](https://api.playcanvas.com/engine/classes/AnimComponent.html) (via [component](https://api.playcanvas.com/web-components/classes/AnimComponentElement.md#component)) for playback state beyond what
this element exposes.

Engine component: [AnimComponent](https://api.playcanvas.com/engine/classes/AnimComponent.html) (`anim`).

**elementSummary** The `<pc-anim>` element plays animation clips over its entity's hierarchy, taken
from `<pc-anim-clip>` children or from the enclosing `<pc-model>`'s own animations. The first
clip plays automatically, and the `clip` attribute switches between them. Must be a child of a
`<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### activate

```ts
get activate(): boolean
set activate(value: boolean)
```

Gets whether playback starts automatically once a clip is assigned.

### clip

```ts
get clip(): string
set clip(value: string)
```

Gets the name of the active clip.

### clips

```ts
get clips(): string[]
```

Gets the names of the assigned clips.

### component

```ts
get component(): AnimComponent | null
```

Gets the underlying PlayCanvas anim component. `null` until the element is
ready — see [ComponentElement.component](https://api.playcanvas.com/web-components/classes/ComponentElement.md#component).

### speed

```ts
get speed(): number
set speed(value: number)
```

Gets the playback speed multiplier applied across all clips.

### transitionTime

```ts
get transitionTime(): number
set transitionTime(value: number)
```

Gets the cross-fade duration of clip switches made through the `clip` attribute.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { activate: boolean; speed: number }
```

Returns the data the component is created with. Overridden by subclasses to supply the
initial values of their cached properties. The element's `enabled` state is not among them:
the base class adds it when it creates the component.

**Returns** `{ activate: boolean; speed: number }`: The initial component data.

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

### pause

```ts
pause(): void
```

Pauses playback, preserving the playhead — [play](https://api.playcanvas.com/web-components/classes/AnimComponentElement.md#play) resumes from where it stopped.

### play

```ts
play(name?: string): void
```

Resumes playback, optionally switching to a named clip first (a hard cut). A name that
matches no clip leaves the selection unchanged.

**Parameters**

- `name` (`string`, optional): The name of the clip to play. Resumes the current clip when omitted.

### transition

```ts
transition(name: string, time?: number): void
```

Cross-fades to a named clip and ensures playback is running. A name that matches no clip
leaves the selection unchanged.

**Parameters**

- `name` (`string`): The name of the clip to fade to.
- `time` (`number`, optional): The fade duration in seconds. Defaults to the `transition-time` attribute.

## Inherited from [ComponentElement](https://api.playcanvas.com/web-components/classes/ComponentElement.md)

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<AnimComponentElement>`