# Creating, Styling & Animating Shapes
Learn how to create, style, and animate shapes in Lottie Creator.

One of the most basic things you can do with Lottie Creator and the Creator API is to add a shape to the canvas, make it pretty, and make it move. Here's how.

## Creating shapes

- First create a **shape layer**, then add shapes to it:

```typescript
const layer = creator.activeScene.createShapeLayer();
const rect = layer.createRectangle({ size: { width: 200, height: 150 } });
```

- This creates a **shape layer** with a rectangle inside.
- You can also create other shapes like ellipses, polygons, stars, and paths (shapes with custom path data).
- Note: Don't be alarmed if you've run the code below but don't see anything on the canvas. Your shape layer just needs a fill or stroke to be visible.

[Creating shapes example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/creating-shapes)

## Styling shapes

### Adding styles

- Shape layers and groups can have **fills** and **strokes**.
- Fills and strokes can be of type `SOLID`, `LINEAR_GRADIENT`, or `RADIAL_GRADIENT`.
- These styles apply to the shapes within them.

```typescript
const fill = layer.createFill({
  type: "SOLID",
  color: { r: 66, g: 133, b: 244 },
});

const stroke = layer.createStroke({
  fill: {
    type: "SOLID",
    color: { r: 0, g: 0, b: 0 },
  },
  width: 2,
});
```

### Modifying styles

- Access existing styles via `fills` and `strokes` arrays.
- Use the `remove()` method on a fill or stroke to remove it.

```typescript
// Change the first fill's color
layer.fills[0].color.staticValue = { r: 255, g: 0, b: 0 };

// Remove the first stroke
layer.strokes[0].remove();
```

[Styling shapes example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/styling-nodes)

## Animating properties

- Some nodes have properties that can be animated.
- Animatable properties have these methods for making creating and updating animation easy:

| Member                | Description                     |
| --------------------- | ------------------------------- |
| `staticValue`         | The value when not animated     |
| `addKeyframes([...])` | Add keyframes for animation     |
| `keyframes`           | Read existing keyframes         |
| `isAnimated`          | Check if property has keyframes |
| `clearKeyframes()`    | Remove all keyframes            |

```typescript
// Animate the position of a layer
layer.position.addKeyframes([
  { frame: 0, value: { x: 100, y: 100 } },
  { frame: 60, value: { x: 400, y: 100 } },
]);
```

### What type of properties can be animated?

- Any property that implements the `Animatable<T>` interface can be animated.
- Here are a few common ones you may want to animate:

#### 1. Transform properties

These transform properties are common to layers and shapes:

| Property   | Type                 | Description          |
| ---------- | -------------------- | -------------------- |
| `position` | `Animatable<Vector>` | X/Y position         |
| `rotation` | `Animatable<number>` | Rotation in degrees  |
| `scale`    | `Animatable<Vector>` | X/Y scale factor     |
| `skew`     | `Animatable<number>` | Skew in degrees      |
| `skewAxis` | `Animatable<number>` | Skew axis in degrees |
| `opacity`  | `Animatable<number>` | Opacity (0–100)      |

[Transform animation example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/animating-transforms)

#### 2. Shape-specific properties

Some shapes have additional animatable properties:

| Shape     | Animatable properties                                                      |
| --------- | -------------------------------------------------------------------------- |
| Rectangle | `size`, `roundness`                                                        |
| Ellipse   | `size`                                                                     |
| Polygon   | `points`, `outerRadius`, `outerRoundness`                                  |
| Star      | `points`, `innerRadius`, `outerRadius`, `innerRoundness`, `outerRoundness` |
| Path      | `pathData`                                                                 |

[Shape animation example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/animating-shape-properties)

#### 3. Style properties

Fill and stroke properties are also animatable:

| Style      | Animatable properties   |
| ---------- | ----------------------- |
| Solid fill | `color`                 |
| Gradient   | `start`, `end`, `stops` |
| Stroke     | `width`                 |

[Style animation example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/styling-nodes)

### Updating existing animation

Often, you might want to update or remove existing animation on nodes:

```typescript
// Checks if the position property is animated
const isAnimated = layer.position.isAnimated;

// Read existing position keyframes
const keyframes = layer.position.keyframes;

// Update an existing keyframe value
const keyframe = layer.position.getKeyframeAt(30);

keyframe.value = {
  x: keyframe.value.x + 20,
  y: keyframe.value.y + 20,
};

// Remove a specific keyframe
keyframe.remove();

// Remove all keyframes
layer.position.clearKeyframes();
```

[Updating animation example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/updating-animation)

### Adding easing to animation

- Easing controls how values interpolate between keyframes.
- With **linear** easing, keyframes animate at a constant speed.
- With **cubic bezier easing**, you can define natural-looking keyframe animations. Common cubic bezier presets include:
  - **Ease in** — `0.42, 0, 1, 1`
  - **Ease out** — `0, 0, 0.58, 1`
  - **Ease in out** — `0.42, 0, 0.58, 1`

```typescript
const easeInOut = { type: "CUBIC_BEZIER", x1: 0.42, y1: 0, x2: 0.58, y2: 1 };
layer.position.addKeyframes([
  // add ease in out
  { frame: 0, value: { x: 50, y: 100 }, easeInOut },
  { frame: 60, value: { x: 350, y: 100 } },
]);
```

[Easing example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/animation-easing)

### Grouping shapes

- Groups let you combine multiple shapes and transform them together.
- When you move, rotate, or scale a group, all children are affected.
- Likewise, when you add a fill or stroke to a group, it affects all the shapes in the group.

```typescript
const group = layer.createGroup({ shapes: [rect, ellipse] });

const endFrame = scene.duration * scene.framerate;

// this rotates the entire group
group.rotation.addKeyframes([
  { frame: 0, value: 0 },
  { frame: endFrame, value: 360 },
]);
```

[Grouping shapes example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/grouping-shapes)