Helpers

Transform

Layer transform

To make the anchor point properly line up with the center of location, p and a should have the same value.

This example allows you to tweak transform attributes and see how the shape changes.

The anchor point is highlighted with an orange dot.

Transforms the parent's coordinate system.

When calculating the final transform, properties MUST be applied as follows:

1. Translate by $-a$
2. Scale by $\frac{s}{100}$
3. If $sk\ne 0$:
   1. Rotate by $-sa$
   2. Skew x by $\tan (-sk)$
   3. Rotate by $sa$
4. Rotate by $-r$
5. Translate by $p$

Steps that have no effect MAY be skipped.

Assuming a transform matrix with the following layout, with the labels equivalent to the CSS matrix transform:

The final transform is given by chaining transform matrices for each transform step:

Note that if the transform matrix is transposed compared to the above:

The operations need to be chained using right multiplication instead of left multiplication.

Visual Object

Marker

Defines named portions of the composition.

Slots

Slots are a way to define a property value once and use the value in multiple properties. Slot definitions are in a dictionary, the slot definition key is the key that is used to match all properties with a sid field to the same key for replacement.

Slot

Defines a property value that will be set to all matched properties. The type of `p` must match the type of the properties referencing this slot via `sid`.

Slottable Object

Object that may have its value replaced with a slot value. When `sid` is present, the object's value is determined by the corresponding slot in the animation's `slots` dictionary.

Slottable Property

Property that may have its value replaced with a slot value. When `sid` is present, `a` and `k` are optional fallback values used if the referenced slot is missing.

Slot Validation Rules

Type Consistency Rule:

• The type of a Slot's p property MUST match the type of the property that references it via sid
• Vector-type slots MAY target Position properties if the number of dimensions match, as implementations perform simple value substitution

Duplicate Slot ID Rule:

• Multiple properties MAY reference the same sid value
• All properties referencing the same sid MUST have compatible types
• If multiple sid values with identical names but incompatible types exist, implementations SHOULD treat this as an error

Missing Reference Handling:

• If a property's sid references a slot that does not exist in the slots dictionary, implementations MUST use the property's own a and k values as fallback
• If a property has only sid (no a/k fallback) and the referenced slot is missing, implementations SHOULD ignore the property or use a type-appropriate default value
• Slots defined in the slots dictionary that are not referenced by any property MAY be ignored

Type Determination:

• The expected type of a slot is determined by its p value
• When parsing, implementations SHOULD check that properties referencing a slot via sid are type-compatible with the slot's p value
• If a type mismatch is detected, implementations SHOULD treat this as an error

Valid example — scalar slot referenced by a scalar property:

{
    "slots": {
        "my_rotation": { "p": { "a": 0, "k": 45 } }
    }
}

{ "a": 0, "k": 0, "sid": "my_rotation" }

Valid example — vector slot referenced by a position property (dimensions match):

{
    "slots": {
        "my_position": { "p": { "a": 0, "k": [100, 200] } }
    }
}

{ "a": 0, "k": [0, 0], "sid": "my_position" }

Valid example — bezier slot referenced by a bezier property:

{
    "slots": {
        "my_path": { "p": { "a": 0, "k": { "c": true, "v": [[0, 0], [100, 0], [100, 100]], "i": [[0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0]] } } }
    }
}

{ "a": 0, "k": { "c": true, "v": [[0, 0]], "i": [[0, 0]], "o": [[0, 0]] }, "sid": "my_path" }

Invalid example — scalar slot referenced by a vector property (type mismatch):

{
    "slots": {
        "my_scale": { "p": { "a": 0, "k": 50 } }
    }
}

{ "a": 0, "k": [100, 100], "sid": "my_scale" }

Metadata

Contains metadata about the animation, such as authoring information and custom data.

Authors can use custom to attach tool-specific or workflow-specific data without conflicting with the standard metadata fields above.

Implementations SHOULD preserve the custom object when reading and writing animations so that data added by other tools is not lost. Because custom has no defined schema, implementations MUST NOT require specific keys to be present, assume any particular structure, or fail when encountering unknown content.

Mask

Mask for layer content.

Masks provide single-channel coverage information (alpha channel) that modulates the layer's content.

When multiple masks are specified, they are combined (blended) into a single coverage buffer, in order, based on the mode operator.

Masks are specified in terms of a Path plus additional properties. For a given mask path, the coverage $C_{path}$ is $1$ inside the path, $0$ outside the path, and possibly in the $[0.\mathrm{.1}]$ range along the path edges (anti-aliasing).

The coverage for a given Mask is

and the cumulative coverage for all masks is

where the product operator is determined by mode. Then the final layer coverage (alpha channel) is

Example