> For the complete documentation index, see [llms.txt](https://docs.lottielab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lottielab.com/editor/animating/timeline/keyframes/add-a-keyframe.md).

# Add a keyframe

To add a keyframe, you need to make sure you are first in [Animate mode](/editor/animating/design-vs-animate-mode.md) using the toggle at the top centre of your editor. In animate mode, you can change the properties of your layer at each point in time to animate it.

### Auto-animate

Lottielab uses auto-animate by default when in animate mode. 

* Go to your timeline
* Drag the [playhead](/editor/animating/timeline/playhead-and-controls.md#playhead) at a point in time where there's no keyframes.
* Change any of the [properties](/editor/properties.md) on your layer to create a new keyframe at this point. E.g Size, Fill or Position.

This means that you only need to move your playhead to a point in time, then change any of the layer's properties at each point in time to create an animation.

<figure><img src="/files/6HUbJ3b1izXk0bxRBw0D" alt=""><figcaption></figcaption></figure>

### 'Add Keyframe' button

You can also add/set a keyframe at a point in time&#x20;

* Go to your timeline
* Drag the [playhead](/editor/animating/timeline/playhead-and-controls.md#playhead) at a point in time where there's no keyframes, you'll see the `+` button show up on the playhead once you do so.
* Click the `+` button.

This allows to also set a keyframe at that point without making any changes to the layer, but you're free to change the layer properties in these keyframes too if you wish.

Setting a keyframe is useful when trying to keep a layer's properties constant for a specific amount of time before animating it again.&#x20;

<figure><img src="/files/R40KGoauNt02LF42qZa0" alt=""><figcaption></figcaption></figure>