Creating, Styling & Animating Shapes

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:

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 →

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.

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.

// 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 →

Animating properties

• Some nodes have properties that can be animated.

• Animatable properties have these methods for making creating and updating animation easy:

// 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:

Transform animation example →

2. Shape-specific properties

Some shapes have additional animatable properties:

Shape animation example →

3. Style properties

Fill and stroke properties are also animatable:

Style animation example →

Updating existing animation

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

// 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 →

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

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 →

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.

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 →