# Property Panel Overview
The **Property Panel** is where you adjust the appearance, transform, and behavior of scenes and layers in Lottie Creator. The panel updates automatically based on what you have selected — whether that's the scene, a layer, a group of layers, a shape inside a layer, or an animated property.

<Image src="https://assets.docs.lottiefiles.com/static/9b5fa3e7e6-640.webp" alt="Property Panel Overview" caption="Property Panel Overview" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/9b5fa3e7e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/9b5fa3e7e6-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/9b5fa3e7e6-1920.webp 1920w" width="3840" height="2160" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAo0lEQVR4nB3Fuw7BUACA4aNaYkNUotITXQ0Gt9QgiHsENTYuiUvKYuBxGA3SPoBFvFp/4Vs+UW0NKTU6FGvN/9XWgEp7RG+xZOoeQiGiKu56w+Ppsz14KFqMlGlhDxyc1REhRITb7c6PHwREohq6aVGeuox3F4SixtgfT7zeH86XK2o8QdKQ1Psz5qsTQjcLZPKSZM4kZUiy0iItLezuBGfphV+Zckga7aZb0QAAAABJRU5ErkJggg==" />

## What the Property Panel Shows

The panel adapts based on your selection:

| Selection                            | Property Panel Shows                                                 |
| ------------------------------------ | -------------------------------------------------------------------- |
| **Scene (nothing selected)**         | Canvas size, duration, background color, FPS                         |
| **Single layer selected**            | Transform, alignment, blend modes, opacity, masking                  |
| **Multiple layers selected (group)** | Shared transform and alignment controls for the selection            |
| **Shape inside a layer**             | Fill, stroke, gradients, path options, trim path                     |
| **Animated property selected**       | Property-specific controls (e.g. Trim Path shows Start, End, Offset) |

This context-aware approach keeps the interface clean and makes commonly used settings easy to access.

## How to Access Properties

<List type="bullet">
  <ListItem>**Click the canvas (empty area)** → Scene properties</ListItem>
  <ListItem>**Click a layer in the Outliner** → Layer transform & appearance</ListItem>
  <ListItem>**Shift-click or drag-select multiple layers** → Group selection controls</ListItem>
  <ListItem>**Click a shape inside a shape layer** → Shape-specific fill/stroke settings</ListItem>

  <ListItem>
    **Click an animated property in the timeline** → Property-specific controls (e.g. selecting Trim Path shows Start,
    End, and Offset fields)
  </ListItem>
</List>

The Property Panel always reflects _exactly what you have selected._

## Numeric Input Math

Type math expressions directly into any numeric input field and Creator will calculate the result on the fly.

<List type="bullet">
  <ListItem>Enter expressions like `100+50`, `360/4`, or `*2` and the value updates automatically</ListItem>

  <ListItem>
    Adjust values relative to what's already there, split angles, scale sizes — all without breaking your flow
  </ListItem>

  <ListItem>Works across position, rotation, scale, opacity, and more</ListItem>
</List>

## Property Categories

### 1. Transform

<List type="bullet">
  <ListItem>
    <strong>Position</strong>
  </ListItem>

  <ListItem>
    <strong>Scale</strong>
  </ListItem>

  <ListItem>
    <strong>Skew</strong>
  </ListItem>

  <ListItem>
    <strong>Rotation</strong>
  </ListItem>

  <ListItem>
    <strong>Anchor Point</strong>
  </ListItem>
</List>

### 2. Alignment

<List type="bullet">
  <ListItem>Horizontal alignment tools</ListItem>
  <ListItem>Vertical alignment tools</ListItem>
</List>

### 3. Appearance

<List type="bullet">
  <ListItem>Fill (solid, linear gradient, radial gradient)</ListItem>
  <ListItem>Stroke (solid, dashed, gradient stroke)</ListItem>
  <ListItem>Stroke width, color, opacity, dash pattern</ListItem>
  <ListItem>Blend modes</ListItem>
  <ListItem>Layer opacity</ListItem>
</List>

### 4. Compositing & Masks

<List type="bullet">
  <ListItem>Track matte</ListItem>
  <ListItem>Mask settings (depending on layer type)</ListItem>
</List>

### 5. Path Controls (shape layers only)

<List type="bullet">
  <ListItem>Trim Path</ListItem>
  <ListItem>Path editing options</ListItem>
</List>

### 6. Text

<List type="bullet">
  <ListItem>Text Content</ListItem>
  <ListItem>Font Size</ListItem>
  <ListItem>Font Style</ListItem>
  <ListItem>Alignment</ListItem>
</List>