# Animation
This guide provides an overview of how to easily create and refine animations in Creator.
The workflow is organized into Basic and Advanced sections, helping you apply motion design step by step.

## Basic workflow

1. **Create your design** using drawing tools and shapes
2. **Position the playhead** at the start of your animation
3. **Enable animation** by toggling the Animate switch in the Timeline, or by clicking the keyframe icon next to the property you want to animate in the Property Panel
4. **Move the playhead** to a new time
5. **Change property values** to create new keyframes automatically
6. **Adjust easing** between keyframes for smooth motion
7. **Preview and refine** your animation

<Grid columns="2">
  <Image src="https://assets.docs.lottiefiles.com/images/animation-workflow-timeline.svg" alt="Animation workflow - timeline" caption="Timeline" zoom variant="default" />

  <Image src="https://assets.docs.lottiefiles.com/images/animation-workflow-property-panel.svg" alt="Animation workflow - property panel" caption="Property panel" zoom variant="default" />
</Grid>

## Key Concepts

<List type="bullet">
  <ListItem>
    **Keyframes** : Markers in time that define property values. The animation smoothly interpolates between keyframes.
  </ListItem>

  <ListItem>**Timeline** : Visual representation of your animation showing layers, keyframes, and time.</ListItem>

  <ListItem>
    **Properties** : Attributes like position, scale, rotation, and opacity that can change over time.
  </ListItem>

  <ListItem>
    **Easing** : Controls how values change between keyframes. Linear easing creates constant speed, while bezier curves
    create acceleration and deceleration.

    <br />

    <Grid columns="3">
      <Card title="Animated Properties" href="/en/creator/07_animation/animated-properties" variant="interactive" />

      <Card title="Timeline" href="/en/creator/07_animation/timeline" variant="interactive" />

      <Card title="Keyframes" href="/en/creator/07_animation/keyframes" variant="interactive" />

      <Card title="Easing" href="/en/creator/07_animation/easing" variant="interactive" />

      <Card title="Advanced Graph Editor" href="/en/creator/07_animation/graph-editor" variant="interactive" />

      <Card title="Advanced Duplicator" href="/en/creator/07_animation/advanced-duplicator" variant="interactive" />

      <Card title="Preview" href="/en/creator/07_animation/preview" variant="interactive" />
    </Grid>
  </ListItem>
</List>
