# SpriteClipElement

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

Source: https://github.com/playcanvas/web-components/blob/eb0b003e898525ad5fc19d8cd93d10dd1be35061/src/components/sprite-clip.ts#L26

The SpriteClipElement interface provides properties and methods for manipulating
[`<pc-sprite-clip>`](https://developer.playcanvas.com/user-manual/web-components/tags/pc-sprite-clip/)
elements. The SpriteClipElement interface also inherits the properties and methods of the
[AsyncElement](https://api.playcanvas.com/web-components/classes/AsyncElement.md) interface.

A clip declares one named animation on its parent `<pc-sprite>`: the frames of its sprite
`asset`, played in frame-key order at `fps` frames per second. Names must be unique within a
`<pc-sprite>`. The element becomes ready once its clip is added to the sprite component, which
loads the sprite asset itself.

**elementSummary** The `<pc-sprite-clip>` element declares one named animation clip on its parent
`<pc-sprite>`: a sprite asset whose frames play at a given rate, once or looping. Must be a
direct child of `<pc-sprite>`.

## Accessors

### asset

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

Gets the id of the `pc-asset` of the sprite whose frames the clip plays.

### fps

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

Gets the rate the clip plays at, in frames per second, where a negative rate plays a
looping clip backwards and ends one that does not loop at once.

### loop

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

Gets whether the clip loops.

### name

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

Gets the name of the clip, which the parent `<pc-sprite>`'s `clip` attribute selects it by.

### spriteAnimationClip

```ts
get spriteAnimationClip(): SpriteAnimationClip | null
```

Gets the engine clip this element declares. `null` until the element is ready, and while
its name is missing or taken by an earlier clip.

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

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<SpriteClipElement>`