# Animatable
Represents an animatable property that can have keyframes or a static value.

{/* Do not edit this file. It is automatically generated by API Documenter. */}

## Animatable interface

Represents an animatable property that can have keyframes or a static value.

**Signature:**

```typescript
interface Animatable<T>
```

## Remarks

When `isAnimated` is false, the property uses `staticValue`. Setting `staticValue` when keyframes exist will not affect the animation

## Example

```ts
// Set static value
layer.position.staticValue = { x: 100, y: 200 };

// Add keyframes for animation
layer.position.addKeyframes([
  { frame: 0, value: { x: 0, y: 0 } },
  { frame: 30, value: { x: 100, y: 200 } },
]);
```

## Properties

<table>
  <thead>
    <tr>
      <th>
        Property
      </th>

      <th>
        Modifiers
      </th>

      <th>
        Type
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        [isAnimated](/en/creator-api/nodes/animatable/is-animated)
      </td>

      <td>
        `readonly`
      </td>

      <td>
        boolean
      </td>

      <td>
        Whether this property has any keyframes
      </td>
    </tr>

    <tr>
      <td>
        [keyframes](/en/creator-api/nodes/animatable/keyframes)
      </td>

      <td>
        `readonly`
      </td>

      <td>
        ReadonlyArray\<[Keyframe](/en/creator-api/nodes/keyframe)\<T>>
      </td>

      <td>
        Array of all keyframes for this property
      </td>
    </tr>

    <tr>
      <td>
        [staticValue](/en/creator-api/nodes/animatable/static-value)
      </td>

      <td />

      <td>
        T
      </td>

      <td>
        The static value used when the property is not animated
      </td>
    </tr>
  </tbody>
</table>

## Methods

<table>
  <thead>
    <tr>
      <th>
        Method
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        [addKeyframes(keyframes)](/en/creator-api/nodes/animatable/add-keyframes)
      </td>

      <td>
        Adds one or more keyframes to this property.
      </td>
    </tr>

    <tr>
      <td>
        [clearKeyframes()](/en/creator-api/nodes/animatable/clear-keyframes)
      </td>

      <td>
        Removes all keyframes from this property.
      </td>
    </tr>

    <tr>
      <td>
        [getKeyframeAt(frame)](/en/creator-api/nodes/animatable/get-keyframe-at)
      </td>

      <td>
        Gets the keyframe at a specific frame number, if one exists.
      </td>
    </tr>

    <tr>
      <td>
        [getValueAt(frame)](/en/creator-api/nodes/animatable/get-value-at)
      </td>

      <td>
        Gets the interpolated value of this property at a specific frame, or the current playhead if omitted.
      </td>
    </tr>
  </tbody>
</table>