Lottie

https://lottiefiles.github.io/lottie-docs/
Admin
Lottie is a vector animation format that uses JSON to represent its data, offering a human-readable...
Tokens:138,295
Snippets:609
Trust Score:8.3
Update:9 months ago
Show doc for...
Tokens:
Raw
### 3D Parenting Example

Source: https://lottiefiles.github.io/lottie-docs/layers

This section provides an example of how 3D layers can be parented, similar to 2D layers. It includes a JSON object demonstrating the structure for defining parented 3D layer properties.

```APIDOC
## 3D Parenting

As with 2D layers, you can parent 3D layers.

### Method
N/A (Conceptual example, not an API endpoint)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```json
{
    "ddd": 1,
    "ty": 4,
    "ind": 1,
    "nm": "Parent",
    "ks": {
        "o": {
            "a": 0,
            "k": 50
        },
        "rx": {
            "a": 0,
            "k": 0
        },
        "ry": {
            "a": 0,
            "k": 0
        },
        "rz": {
            "a": 0,
            "k": 0
        },
        "or": {
            "a": 0,
            "k": [
                0,
                0,
                0
            ]
        },
        "p": {
            "a": 0,
            "k": [
                0,
                0,
                -10
            ]
        },
        "a": {
            "a": 0,
            "k": [
                0,
                0,
                0
            ]
        },
        "s": {
            "a": 0,
            "k": [
                100,
                100,
                100
            ]
        }
    },
    "ip": 0,
    "op": 120,
    "st": 0,
    "shapes": [
        {
            "ty": "rc",
            "s": {
                "a": 0,
                "k": [
                    256,
                    256
                ]
            },
            "p": {
                "a": 0,
                "k": [
                    0,
                    0
                ]
            },
            "r": {
                "a": 0,
                "k": 0
            }
        },
        {
            "ty": "fl",
            "c": {
                "a": 0,
                "k": [
                    1,
                    1,
                    1
                ]
            },
            "o": {
                "a": 0,
                "k": 100
            }
        }
    ]
}
```

### Response
N/A
```

--------------------------------

### JavaScript: Example Invocation of Zig Zag Function

Source: https://lottiefiles.github.io/lottie-docs/rendering

Demonstrates how to call the main `zig_zag` function with sample parameters. This example assumes the existence of `convert_shape`, `star`, `modifier.s.k`, `modifier.r.k`, and `modifier.pt.k`.

```javascript
// Example invocation
zig_zag([convert_shape(star)], modifier.s.k, modifier.r.k, modifier.pt.k);
```

--------------------------------

### Lottie Precomposition Example (JSON)

Source: https://lottiefiles.github.io/lottie-docs/static/examples/fractal

Illustrates how precomposition is represented in Lottie JSON, referencing a 'refId' to an asset defined elsewhere in the file. This allows for modularity and reuse of animation segments.

```json
{
    "id": "precomp_1",
    "layers": [
        {
            "ddd": 0,
            "ty": 0,
            "sr": 1,
            "ks": {
                "a": { "k": [128, 170.667], "a": 0 },
                "p": { "k": [128, 170.667], "a": 0 },
                "s": { "k": [50, 50], "a": 0 },
                "r": { "k": 90, "a": 0 }
            },
            "ao": 0,
            "ip": 0,
            "op": 180,
            "st": 22.5,
            "bm": 0,
            "ind": 0,
            "refId": "precomp_0",
            "w": 512,
            "h": 512
        }
    ]
}
```

--------------------------------

### Position Expression as a Function Example

Source: https://lottiefiles.github.io/lottie-docs/expressions

This example demonstrates how a composition object can be used as a function to access layers by name or index, and then utilize their properties within an expression. Similar to the previous example, it calculates a dynamic position based on layer rotation.

```javascript
var $bm_rt = [256, 256]
        var rotation = thisComp("Layer").transform.rotation / 180 * Math.PI;
        $bm_rt[0] += Math.cos(rotation) * 200;
        $bm_rt[1] += Math.sin(rotation) * 200;
```

```json
{
    "k": [
        256,
        256
    ],
    "a": 0,
    "x": "var $bm_rt = [256, 256]\n        var rotation = thisComp(\"Layer\").transform.rotation / 180 * Math.PI;\n        $bm_rt[0] += Math.cos(rotation) * 200;\n        $bm_rt[1] += Math.sin(rotation) * 200;"
}
```

--------------------------------

### Lottie Stroke Style Example (JSON)

Source: https://lottiefiles.github.io/lottie-docs/shapes

Provides a JSON example for a solid stroke style in Lottie animations. This snippet details properties such as name, opacity, color, line cap, line join, miter limit, and width.

```json
{
    "ty": "st",
    "nm": "Stroke",
    "o": {
        "a": 0,
        "k": 100
    },
    "c": {
        "a": 0,
        "k": [
            1,
            0.98,
            0.28
        ]
    },
    "lc": 2,
    "lj": 2,
    "ml": 3,
    "w": {
        "a": 0,
        "k": 32
    }
}
```

--------------------------------

### Gradient Fill Properties and Example

Source: https://lottiefiles.github.io/lottie-docs/shapes

Describes the properties of a gradient fill in Lottie, including its type, color stops, start and end points, and opacity. The JSON example demonstrates a linear gradient fill with specific color values and coordinates.

```json
{
    "ty": "gf",
    "nm": "Gradient Fill",
    "o": {
        "a": 0,
        "k": 100
    },
    "r": 1,
    "s": {
        "a": 0,
        "k": [
            256,
            496
        ]
    },
    "e": {
        "a": 0,
        "k": [
            256,
            16
        ]
    },
    "t": 1,
    "g": {
        "p": 3,
        "k": {
            "a": 0,
            "k": [
                0,
                0.7686274509803922,
                0.8509803921568627,
                0.9607843137254902,
                0.5,
                0.19600213626306554,
                0.31400015259021896,
                0.6899977111467155,
                1,
                0.16099794003204396,
                0.18399328603036547,
                0.45900663767452504,
                0,
                1,
                0.5,
                1,
                1,
                1
            ]
        }
    }
}
```

--------------------------------

### Lottie Time Remapping JSON Example

Source: https://lottiefiles.github.io/lottie-docs/layers

This JSON snippet demonstrates the 'tm' property used for time remapping within a Lottie precomposition. It defines how the animation's playback speed and frame rendering are controlled.

```json
{
    "ty": 0,
    "ddd": 0,
    "nm": "Remapped",
    "mn": "{0f7b917c-b0e8-450f-bb63-812dff786620}",
    "ip": 0,
    "op": 180,
    "ind": 1,
    "st": 0,
    "sr": 1,
    "tm": {
        "a": 1,
        "k": [
            {
                "t": 0,
                "s": [
                    0
                ],
                "o": {
                    "x": 0,
                    "y": 0
                },
                "i": {
                    "x": 1,
                    "y": 1
                }
            },
            {
                "t": 30,
                "s": [
                    3
                ],
                "o": {
                    "x": 0,
                    "y": 0
                },
                "i": {
                    "x": 1,
                    "y": 1
                }
            },
            {
                "t": 60,
                "s": [
                    1.5
                ],
                "o": {
                    "x": 0,
                    "y": 0
                },
                "i": {
                    "x": 1,
                    "y": 1
                }
            },
            {
                "t": 180,
                "s": [
                    3
                ],
                "o": {
                    "x": 0,
                    "y": 0
                },
                "i": {
                    "x": 1,
                    "y": 1
                }
            }
        ]
    },
    "ks": {},
    "refId": "{4d838004-a221-48cb-966f-399347c5acb8}",
    "w": 512,
    "h": 512
}
```

--------------------------------

### Base Gradient

Source: https://lottiefiles.github.io/lottie-docs/lottie.schema

Common properties for gradients, including gradient colors and start point.

```APIDOC
## Base Gradient

### Description
Common properties for gradients.

### Method
N/A (Schema Definition)

### Endpoint
N/A (Schema Definition)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **g** (gradient-property) - Optional - Gradient colors.
- **s** (start point definition) - Optional - Start point of the gradient.

### Request Example
```json
{
  "g": { /* gradient-property definition */ },
  "s": { /* start point definition */ }
}
```

### Response
#### Success Response (200)
N/A (Schema Definition)

#### Response Example
N/A (Schema Definition)
```

--------------------------------

### Resizing Lottie Animation with Precomposition

Source: https://lottiefiles.github.io/lottie-docs/breakdown/precomps

Demonstrates resizing a Lottie animation by scaling a precomposed layer. This method is preferred over scaling individual layers to avoid issues with parenting and transforms. The example modifies the scale property of a precomp layer while keeping 'w' and 'h' constant.

```json
{
    "v": "5.7.1",
    "ip": 0,
    "op": 60,
    "nm": "Animation",
    "mn": "{0b14b755-3d9e-4f7f-b7ab-21cd57d13e23}",
    "fr": 60,
    "w": 512,
    "h": 512,
    "assets": [
        "..."
    ],
    "layers": [
        {
            "ddd": 0,
            "ty": 0,
            "ind": 0,
            "st": 0,
            "ip": 0,
            "op": 60,
            "w": 512,
            "h": 512,
            "nm": "Precomp Layer",
            "ks": {},
            "refId": "Star"
        }
    ],
    "meta": {
        "g": "Glaxnimate 0.5.0-93-g187709f5"
    }
}
```

--------------------------------

### Basic Expressions for Animation Control

Source: https://lottiefiles.github.io/lottie-docs/advanced_interactions

Introduces the use of expressions in Lottie animations, which are small JavaScript snippets to dynamically alter animation properties. This example shows how to animate the rotation of a star using an expression instead of keyframes.

```json
{
    "v": "5.9.1",
    "ip": 0,
    "op": 360,
    "fr": 60,
    "w": 512,
    "h": 512,
    "layers": [
        {
            "ty": 4,
            "ip": 0,
            "op": 360,
            "st": 0,
            "ks": {},
            "shapes": [
                {
                    "ty": "sr",
                    "p": {"a": 0, "k": [256, 256]},
                    "or": {"a": 0, "k": 200},
                    "ir": {"a": 0, "k": 100},
                    "r": {"a": 0, "k": 0, "x": "var $bm_rt = time * 60;"},
                    "pt": {"a": 0, "k": 5},
                    "sy": 1,
                    "os": {"a": 0, "k": 0},
                    "is": {"a": 0, "k": 0}
                },
                {
                    "ty": "st",
                    "o": {"a": 0, "k": 100},
                    "c": {"a": 0, "k": [1, 1, 0.3]},
                    "lc": 2,
                    "lj": 2,
                    "ml": 0,
                    "w": {"a": 0, "k": 30}
                }
            ]
        }
    ]
}
```

```javascript
var container = document.getElementById("level3");
var options = {
    container: container,
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: json,
};
var anim = bodymovin.loadAnimation(options);
```

--------------------------------

### Configure Trim Path in Lottie (JSON)

Source: https://lottiefiles.github.io/lottie-docs/constants

Configures trim path animations in Lottie, affecting how shapes are revealed over time. Includes start (s), end (e), and offset (o) properties. 'm' determines how multiple shapes are handled ('Parallel' - 1, 'Sequential' - 2).

```JSON
{
    "ty": "tm",
    "nm": "Trim Path",
    "s": {
        "a": 0,
        "k": 0
    },
    "e": {
        "a": 0,
        "k": 50
    },
    "o": {
        "a": 0,
        "k": 0
    },
    "m": 1
}
```

--------------------------------

### Generate Linear Lines from Points - After Effects Script

Source: https://lottiefiles.github.io/lottie-docs/static/examples/bezier_expression

This script generates a linear path by connecting a series of points defined within a group. It iterates through specified points, retrieves their positions, and constructs a $bm_rt object representing the path. This is useful for creating dynamic line animations in After Effects.

```javascript
var group = thisLayer.content("Linear Points");
var num_points = 2;
var points = [];
var ip = [];
var op = [];
for ( var i = 0; i < num_points; i++ )
{
    var pos = group.content("p" + i).position;
    points.push(pos);
    ip.push(pos);
    op.push(pos);
}
var $bm_rt = {
    v: points,
    i: ip,
    o: op
};

```

--------------------------------

### Stroke Dash Pattern Definition and Example

Source: https://lottiefiles.github.io/lottie-docs/shapes

Defines the structure for stroke dash patterns in Lottie, specifying dash, gap, and offset entries. The JSON example illustrates a stroke with offset, dash, and gap properties.

```json
{
    "ty": "st",
    "nm": "Stroke",
    "o": {
        "a": 0,
        "k": 100
    },
    "c": {
        "a": 0,
        "k": [
            1,
            0.98,
            0.28
        ]
    },
    "lc": 2,
    "lj": 2,
    "ml": 3,
    "w": {
        "a": 0,
        "k": 32
    },
    "d": [
        {
            "n": "o",
            "nm": "offset",
            "v": {
                "a": 0,
                "k": 0
            }
        },
        {
            "n": "d",
            "nm": "dash",
            "v": {
                "a": 0,
                "k": 30
            }
        },
        {
            "n": "g",
            "nm": "gap",
            "v": {
                "a": 0,
                "k": 50
            }
        }
    ]
}
```

--------------------------------

### JSON Structure Comparison for Overlaying Animations

Source: https://lottiefiles.github.io/lottie-docs/breakdown/precomps

Illustrates the transformation of JSON structures when overlaying two Lottie animations. It highlights changes in the 'assets' and 'layers' sections to combine elements from different animations.

```json
// First Animation:
{
    "ip": 0,
    "op": 60,
    "fr": 60,
    "w": 512,
    "h": 512,
    "assets": [
        {
            "id": "Star",
            "layers": [ /* Star Precomp Layers */ ]
        }
    ],
    "layers": [ /* First Animation Layers */ ]
}

// Second Animation
{
    "ip": 0,
    "op": 60,
    "fr": 60,
    "w": 512,
    "h": 512,
    "assets": [],
    "layers": [ /* Second Animation Layers */ ]
}

// Overlaid
{
    "ip": 0,
    "op": 60,
    "fr": 60,
    "w": 512,
    "h": 512,
    "assets": [
        {
            "id": "Star",
            "layers": [ /* Star Precomp Layers */ ]
        },
        {
            "id": "Expanding Stars",
            "layers": [ /* First Animation Layers */ ]
        },
        {
            "id": "Circle",
            "layers": [ /* Second Animation Layers */ ]
        }
    ],
    "layers": [
        {
            "nm": "Expanding Stars Layer",
            "refId": "Expanding Stars",
            "ty": 0,
            "st": 0,
            "ip": 0,
            "op": 60,
            "w": 512,
            "h": 512,
            "ks": {}
        },
        {
            "nm": "Circle Layer",
            "refId": "Circle",
            "ty": 0,
            "st": 0,
            "ip": 0,
            "op": 60,
            "w": 512,
            "h": 512,
            "ks": {}
        }
    ]
}
```

--------------------------------

### First Keyframe for Animated Position in Lottie

Source: https://lottiefiles.github.io/lottie-docs/breakdown/bouncy_ball

This JSON object represents the first keyframe of an animated property. 't' defines the time (0 for start), 's' is the value, and 'o'/'i' define the easing curve for the start and end of this keyframe's segment.

```json
{
    "t": 0,
    "s": [235, 106],
    "h": 0,
    "o": {
        "x": [0.333],
        "y": [0]
    },
    "i": {
        "x": [1],
        "y": [1]
    }
}
```

--------------------------------

### Offset Path Configuration JSON

Source: https://lottiefiles.github.io/lottie-docs/rendering

This JSON object defines the configuration for the 'Offset Path' effect. It includes properties for the type of operation ('ty'), name ('nm'), unique ID ('mn'), and parameters like amount ('a'), line join ('lj'), and miter limit ('ml').

```json
{
    "ty": "op",
    "nm": "Offset Path",
    "mn": "{b4af429a-546e-4728-a869-711a404c55ae}",
    "a": {
        "a": 0,
        "k": 10
    },
    "lj": 2,
    "ml": {
        "a": 0,
        "k": 100
    }
}
```

--------------------------------

### Render PolyStar Shape (Python, C++, TypeScript)

Source: https://lottiefiles.github.io/lottie-docs/rendering

This snippet demonstrates how to render a PolyStar shape by calculating its vertices and tangents. It supports creating both star and polygon shapes based on input parameters. The code takes shape, position, point count, radius, outer radius, outer smoothing, star points, inner radius, and inner smoothing as input.

```python
import math

def polystar(shape: Bezier, p: Vector2D, pt: float, r: float, or_: float, os: float, sy: int, ir: float, is_: float):
    points: int = int(round(pt))
    alpha: float = -r * math.pi / 180 - math.pi / 2
    theta: float = -math.pi / points
    tan_len_out: float = (2 * math.pi * or_) / (4 * points) * (os / 100)
    tan_len_in: float = (2 * math.pi * ir) / (4 * points) * (is_ / 100)

    shape.closed = True

    for i in range(points):
        beta: float = alpha + i * theta * 2
        v_out: Vector2D = Vector2D(or_ * math.cos(beta),  or_ * math.sin(beta))
        shape.add_vertex(p + v_out)

        if os != 0 and or_ != 0:
            # We need to add bezier tangents
            tan_out: Vector2D = v_out * tan_len_out / or_
            shape.set_in_tangent(Vector2D(-tan_out.y, tan_out.x))
            shape.set_out_tangent(Vector2D(tan_out.y, -tan_out.x))

        if sy == 1:
            # We need to add a vertex towards the inner radius to make a star
            v_in: Vector2D = Vector2D(ir * math.cos(beta + theta), ir * math.sin(beta + theta))
            shape.add_vertex(p + v_in)

            if is_ != 0 and ir != 0:
                # We need to add bezier tangents
                tan_in = v_in * tan_len_in / ir
                shape.set_in_tangent(Vector2D(-tan_in.y, tan_in.x))
                shape.set_out_tangent(Vector2D(tan_in.y, -tan_in.x))
```

```cpp
#include <cmath>
#include <numbers>

void polystar(Bezier shape, Vector2D p, float pt, float r, float or_, float os, int sy, float ir, float is)
{
    int points = std::round(pt);
    float alpha = -r * std::numbers::pi / 180 - std::numbers::pi / 2;
    float theta = -std::numbers::pi / points;
    float tan_len_out = 2 * std::numbers::pi * or_ / 4 * points * os / 100;
    float tan_len_in = 2 * std::numbers::pi * ir / 4 * points * is / 100;

    shape.closed = true;

    for ( int i = 0; i < points; i++ )
    {
        float beta = alpha + i * theta * 2;
        Vector2D v_out(or_ * std::cos(beta), or_ * std::sin(beta));
        shape.add_vertex(p + v_out);

        if ( os != 0 && or_ != 0 )
        {
            // We need to add bezier tangents
            Vector2D tan_out = v_out * tan_len_out / or_;
            shape.set_in_tangent(Vector2D(-tan_out.y, tan_out.x));
            shape.set_out_tangent(Vector2D(tan_out.y, -tan_out.x));
        }

        if ( sy == 1 )
        {
            // We need to add a vertex towards the inner radius to make a star
            Vector2D v_in(ir * std::cos(beta + theta), ir * std::sin(beta + theta));
            shape.add_vertex(p + v_in);

            if ( is != 0 && ir != 0 )
            {
                // We need to add bezier tangents
                tan_in = v_in * tan_len_in / ir;
                shape.set_in_tangent(Vector2D(-tan_in.y, tan_in.x));
                shape.set_out_tangent(Vector2D(tan_in.y, -tan_in.x));
            }
        }
    }
}
```

```typescript
function polystar(shape: Bezier, p: Vector2D, pt: number, r: number, or: number, os: number, sy: number, ir: number, is: number) {
    let points: number = new Number(round(pt));
    let alpha: number = -r * Math.PI / 180 - Math.PI / 2;
    let theta: number = -Math.PI / points;
    let tanLenOut: number = 2 * Math.PI * or / 4 * points * os / 100;
    let tanLenIn: number = 2 * Math.PI * ir / 4 * points * is / 100;

    shape.closed = true;

    for ( let i: number = 0; i < points; i++ ) {
        let beta: number = alpha + i * theta * 2;
        let vOut: Vector2D = new Vector2D(or * Math.cos(beta), or * Math.sin(beta));
        shape.addVertex(p + vOut);

        if ( os != 0 && or != 0 ) {
            // We need to add bezier tangents
            let tanOut: Vector2D = vOut * tanLenOut / or;
            shape.setInTangent(new Vector2D(-tanOut.y, tanOut.x));
            shape.setOutTangent(new Vector2D(tanOut.y, -tanOut.x));
        }

        if ( sy == 1 ) {
            // We need to add a vertex towards the inner radius to make a star
            let vIn: Vector2D = new Vector2D(ir * Math.cos(beta + theta), ir * Math.sin(beta + theta));
            shape.addVertex(p + vIn);

            if ( is != 0 && ir != 0 ) {
                // We need to add bezier tangents
                tanIn = vIn * tanLenIn / ir;
                shape.setInTangent(new Vector2D(-tanIn.y, tanIn.x));
                shape.setOutTangent(new Vector2D(tanIn.y, -tanIn.x));
            }
        }
    }
}
```

--------------------------------

### Initialize Custom Layer Properties with Time Check

Source: https://lottiefiles.github.io/lottie-docs/advanced_interactions

This code snippet demonstrates an initial approach to initializing custom layer properties when the time is exactly 0. It's a simple check but can be unreliable during loops.

```javascript
if ( time == 0 )
    thisLayer.my_property = "some value";
```

--------------------------------

### Layer Properties

Source: https://lottiefiles.github.io/lottie-docs/lottie.schema

Defines properties for animation layers, including in-point, out-point, time stretch, and start time.

```APIDOC
## Layer Properties

### Description
Defines properties related to the timing and visibility of animation layers.

### Method
N/A (Schema Definition)

### Endpoint
N/A (Schema Definition)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **ip** (number) - Optional - Frame when the layer becomes visible. Default: 0
- **op** (number) - Optional - Frame when the layer becomes invisible. Default: 99999
- **sr** (number) - Optional - Time stretch factor. Default: 1
- **st** (number) - Optional - Start time offset. Default: 0

### Request Example
```json
{
  "ip": 10,
  "op": 100,
  "sr": 1,
  "st": 0
}
```

### Response
#### Success Response (200)
(Schema Definition - No specific response body provided for this section)

#### Response Example
(No specific example provided for this section)
```

--------------------------------

### Overlaying Lottie Animations JSON Structure

Source: https://lottiefiles.github.io/lottie-docs/breakdown/precomps

Demonstrates the JSON structure for overlaying two Lottie animations. It shows how to merge assets and layers from multiple animations into a single file, ensuring unique asset identifiers.

```json
{
    "v": "5.7.1",
    "ip": 0,
    "op": 60,
    "nm": "Animation",
    "mn": "{0b14b755-3d9e-4f7f-b7ab-21cd57d13e23}",
    "fr": 60,
    "w": 512,
    "h": 512,
    "assets": [
        "..."
    ],
    "layers": [
        {
            "nm": "Expanding Stars Layer",
            "refId": "Expanding Stars",
            "ty": 0,
            "st": 0,
            "ip": 0,
            "op": 60,
            "w": 512,
            "h": 512,
            "ks": {}
        },
        {
            "nm": "Circle Layer",
            "refId": "Circle",
            "ty": 0,
            "st": 0,
            "ip": 0,
            "op": 60,
            "w": 512,
            "h": 512,
            "ks": {}
        }
    ]
}
```

--------------------------------

### Repeater Transform

Source: https://lottiefiles.github.io/lottie-docs/lottie.schema

Defines a transform applied to subsequent repeated objects in a repeater. It includes properties for start and end opacity.

```APIDOC
## Repeater Transform

### Description
Transform used by a repeater, the transform is applied to each subsequent repeated object.

### Method
N/A (Schema Definition)

### Endpoint
N/A (Schema Definition)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **so** (scalar-property) - Optional - Opacity of the first repeated object.
- **eo** (scalar-property) - Optional - Opacity of the last repeated object.

### Request Example
```json
{
  "so": { /* scalar-property definition */ },
  "eo": { /* scalar-property definition */ }
}
```

### Response
#### Success Response (200)
N/A (Schema Definition)

#### Response Example
N/A (Schema Definition)
```

--------------------------------

### Trim Path Definition

Source: https://lottiefiles.github.io/lottie-docs/schema

Details the properties for trimming shapes into segments, including start, end, and offset.

```APIDOC
## Trim Path Definition

### Description
Trims shapes into a segment.

### Method
N/A (Schema Definition)

### Endpoint
N/A (Schema Definition)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **ty** (string) - Required - Shape Type, constant value 'tm'
- **s** (scalar-property) - Required - Segment start
- **e** (scalar-property) - Required - Segment end
- **o** (scalar-property) - Offset
- **m** (trim-multiple-shapes) - How to treat multiple copies

### Request Example
```json
{
  "ty": "tm",
  "s": {
    "k": 0,
    "x": 1,
    "a": 0,
    "ix": 1
  },
  "e": {
    "k": 100,
    "x": 1,
    "a": 0,
    "ix": 2
  },
  "o": {
    "k": 0,
    "x": 1,
    "a": 0,
    "ix": 3
  },
  "m": 1
}
```

### Response
#### Success Response (200)
- **ty** (string) - Shape Type, constant value 'tm'
- **s** (scalar-property) - Segment start
- **e** (scalar-property) - Segment end
- **o** (scalar-property) - Offset
- **m** (trim-multiple-shapes) - How to treat multiple copies

#### Response Example
```json
{
  "ty": "tm",
  "s": {
    "k": 0,
    "x": 1,
    "a": 0,
    "ix": 1
  },
  "e": {
    "k": 100,
    "x": 1,
    "a": 0,
    "ix": 2
  },
  "o": {
    "k": 0,
    "x": 1,
    "a": 0,
    "ix": 3
  },
  "m": 1
}
```
```

--------------------------------

### 3D Parenting Configuration in Lottie

Source: https://lottiefiles.github.io/lottie-docs/layers

This JSON snippet illustrates the configuration for parenting 3D layers in Lottie animations. It defines properties like rotation, orientation, and position for parented layers.

```json
{
    "ddd": 1,
    "ty": 4,
    "ind": 1,
    "nm": "Parent",
    "ks": {
        "o": {
            "a": 0,
            "k": 50
        },
        "rx": {
            "a": 0,
            "k": 0
        },
        "ry": {
            "a": 0,
            "k": 0
        },
        "rz": {
            "a": 0,
            "k": 0
        },
        "or": {
            "a": 0,
            "k": [
                0,
                0,
                0
            ]
        },
        "p": {
            "a": 0,
            "k": [
                0,
                0,
                -10
            ]
        },
        "a": {
            "a": 0,
            "k": [
                0,
                0,
                0
            ]
        },
        "s": {
            "a": 0,
            "k": [
                100,
                100,
                100
            ]
        }
    },
    "ip": 0,
    "op": 120,
    "st": 0,
    "shapes": [
        {
            "ty": "rc",
            "s": {
                "a": 0,
                "k": [
                    256,
                    256
                ]
            },
            "p": {
                "a": 0,
                "k": [
                    0,
                    0
                ]
            },
            "r": {
                "a": 0,
                "k": 0
            }
        },
        {
            "ty": "fl",
            "c": {
                "a": 0,
                "k": [
                    1,
                    1,
                    1
                ]
            },
            "o": {
                "a": 0,
                "k": 100
            }
        }
    ]
}
```

--------------------------------

### Gradient Fill

Source: https://lottiefiles.github.io/lottie-docs/shapes

Defines the fill color using a gradient, with properties for start point, end point, type, and colors.

```APIDOC
## Gradient Fill

### Description
Gradient fill color. This attribute defines the color of a shape using a gradient.

### Base Gradient Common Properties
| Attribute | Type     | Title         | Description                                                                 |
|-----------|----------|---------------|-----------------------------------------------------------------------------|
| `g`       | Gradient | Colors        | Gradient colors                                                             |
| `s`       | Position | Start Point   | Starting point for the gradient                                             |
| `e`       | Position | End Point     | End point for the gradient                                                  |
| `t`       | number   | Gradient Type | Type of the gradient (1 for Linear, 2 for Radial)                           |
| `h`       | number   | Highlight Length | Highlight Length, as a percentage between `s` and `e`                       |
| `a`       | number   | Highlight Angle | Highlight Angle in clockwise degrees, relative to the direction from `s` to `e` |

### Gradient Fill Specific Properties
| Attribute | Type      | Title       | Description                                                 |
|-----------|-----------|-------------|-------------------------------------------------------------|
| `nm`      | string    | Name        | Human readable name, as seen from editors and the like      |
| `mn`      | string    | Match Name  | Match name, used in expressions                             |
| `hd`      | boolean   | Hidden      | Whether the shape is hidden                                 |
| `ty`      | string    | Shape Type  | Shape Type, expected to be 'gf' for Gradient Fill           |
| `bm`      | Blend Mode| Blend Mode  | Blend Mode                                                  |
| `ix`      | integer   | Property index | Index used in expressions                                   |
| `cl`      | string    | CSS Class   | CSS class used by the SVG renderer                          |
| `ln`      | string    | Layer XML ID| `id` attribute used by the SVG renderer                     |
| `o`       | number    | Opacity     | Opacity, 100 means fully opaque                             |
| `r`       | number    | Fill Rule   | Fill Rule (1 fornonzero, 2 for evenodd)                     |

### Example Data
- Start X: 256
- Start Y: 496
- End X: 256
- End Y: 16
- Type: Linear (1) / Radial (2)
- Highlight: 0
- Highlight Angle: 0

### Request Example
```json
{
    "ty": "gf",
    "nm": "Gradient Fill",
    "o": {
        "a": 0,
        "k": 100
    },
    "r": 1,
    "s": {
        "a": 0,
        "k": [
            256,
            496
        ]
    },
    "e": {
        "a": 0,
        "k": [
            256,
            16
        ]
    },
    "t": 1,
    "g": {
        "p": 3,
        "k": {
            "a": 0,
            "k": [
                0,
                0.7686274509803922,
                0.8509803921568627,
                0.9607843137254902,
                0.5,
                0.19600213626306554,
                0.31400015259021896,
                0.6899977111467155,
                1,
                0.16099794003204396,
                0.18399328603036547,
                0.45900663767452504,
                0,
                1,
                0.5,
                1,
                1,
                1
            ]
        }
    }
}
```
```

--------------------------------

### Patch Lottie Renderer Methods in JavaScript

Source: https://lottiefiles.github.io/lottie-docs/advanced_interactions

This code demonstrates how to patch the `initItems` and `createItem` methods of the lottie-web renderer. It allows for custom logic execution before and after these methods are called, enabling event emission and custom item creation logic. Dependencies include the lottie-web library.

```javascript
    load(lottie, resize = true)
    {
        // (omitted the part of the code that's the same as before)

        // Create lottie player
        this.anim = bodymovin.loadAnimation(options);

        this._patch_renderer();
    }


    _patch_renderer()
    {
        // We patch initItems to trigger an event before any expression is evaluated:
        var old_init = this.anim.renderer.initItems.bind(this.anim.renderer);
        var post_init = this._lottie_load_event.bind(this)
        this.anim.renderer.initItems = function(){
            old_init();
            post_init();
        };

        // We patch createItem to add event listener.
        // It takes the JSON layer as input and returns the renderer later object
        this.layer_elements = [];
        var old_create = this.anim.renderer.createItem.bind(this.anim.renderer);
        this.anim.renderer.createItem = (function(layer){
            var item = old_create(layer);
            this._create_item_event(layer, item);
            return item;
        }).bind(this);
    }

    _lottie_load_event()
    {
        let ev = new Event("load", {});
        this.container.dispatchEvent(ev);
        for ( let layer of this.layer_elements )
            layer.dispatchEvent(ev);
    }

    _create_item_event(lottie, item)
    {
        // lottie is the JSON layer
        // item.layerElement is the DOM element for this layer
        // item.layerInterface is the expression thisLayer object
        if ( !lottie.events )
            return;

        // Create a dummy element for Null layers and the like,
        // it makes it easier to listen for `load` events
        let element = item.layerElement ?? document.createElement("div");

        // Keep track of layer elements so they can have the `load` event too
        this.layer_elements.push(element);

        for ( let [name, func] of Object.entries(lottie.events) )
        {
            let handler = this.expression_to_event_handler(func);
            function listener(ev)
            {
                this.prepare_lottie_event(ev);
                this.handle_lottie_event(ev, handler, item.layerInterface);
            }
            element.addEventListener(name, listener.bind(this));
        }
    }

```

--------------------------------

### Get Composition by Name (JavaScript)

Source: https://lottiefiles.github.io/lottie-docs/expressions

The comp() function retrieves a Composition object by its name. This is useful for referencing and manipulating other compositions within the project.

```javascript
comp("MyCompositionName");
```

--------------------------------

### Reliable Initialization of Layer Properties with Undefined Check

Source: https://lottiefiles.github.io/lottie-docs/advanced_interactions

This method provides a more robust way to initialize custom layer properties by checking if the property is 'undefined'. This ensures that properties are initialized only once, even when the player loops.

```javascript
if ( thisLayer.my_property === undefined )
    thisLayer.my_property = "some value";
```

--------------------------------

### Configure Matte Layer in Lottie JSON

Source: https://lottiefiles.github.io/lottie-docs/layers

This JSON snippet configures a layer to act as a matte for another layer. The 'tt' attribute specifies the matte mode, and 'tp' can define the target layer if not the immediate preceding one. It's used for advanced masking effects.

```json
{
    "ddd": 0,
    "ty": 4,
    "ind": 2,
    "st": 0,
    "ip": 0,
    "op": 180,
    "nm": "Shapes (Masked)",
    "ks": {},
    "shapes": [],
    "tt": 1,
    "tp": 1
}
```

--------------------------------

### Text Range Selector API

Source: https://lottiefiles.github.io/lottie-docs/text

Details on the Text Range Selector, which specifies the subset of text characters to which properties are applied, including start, end, and offset definitions.

```APIDOC
## Text Range Selector API

### Description
Defines the range of characters within a text layer to which specific properties are applied. This allows for targeting subsets of text for animation or styling.

### Method
N/A (Configuration Object)

### Endpoint
N/A (Part of Text Range Object)

### Parameters
#### Request Body
- **t** (0-1 integer) - Expressible.
- **xe** (Scalar) - Max Ease.
- **ne** (Scalar) - Min Ease.
- **a** (Scalar) - Max Amount.
- **b** (Text Based) - Based On (e.g., Characters, Words, Lines).
- **rn** (0-1 integer) - Randomize.
- **sh** (Text Shape) - Shape (e.g., Square, Triangle).
- **o** (Scalar) - Offset.
- **r** (Text Range Units) - Range Units (e.g., Percent, Index).
- **sm** (Scalar) - Selector Smoothness.
- **s** (Scalar) - Start of the range.
- **e** (Scalar) - End of the range.

### Request Example
```json
{
    "t": 0,
    "o": {"a": 0, "k": 0},
    "s": {"a": 0, "k": 60},
    "e": {"a": 0, "k": 75},
    "a": {"a": 0, "k": 100},
    "b": 1,
    "rn": 0,
    "sh": 1,
    "xe": {"a": 0, "k": 0},
    "ne": {"a": 0, "k": 0},
    "sm": {"a": 0, "k": 100},
    "r": 1
}
```

### Response
#### Success Response (200)
N/A (Configuration Object)

#### Response Example
N/A
```

--------------------------------

### Use System Font in Lottie

Source: https://lottiefiles.github.io/lottie-docs/text

Specifies a font using the system's available font families. `origin` is 0 (or omitted), and `fFamily` must be a font installed on the system.

```json
{
    "fFamily": "monospace",
    "fName": "MyFont",
    "fStyle": "Regular"
}
```

--------------------------------

### Layer Types Overview

Source: https://lottiefiles.github.io/lottie-docs/lottie.schema

This section details the various layer types supported in the Lottie file format. Each layer type has a unique identifier (`ty`) and specific properties.

```APIDOC
## Layer Types Overview

This document describes the different types of layers that can be included in a Lottie animation file.

### Null Layer

*   **Description**: A layer with no visual data, primarily used for grouping other layers or as a reference point.
*   **Type ID (`ty`)**: 3
*   **Properties**: Extends `visual-layer`, requires `ty`.

### Data Layer

*   **Description**: A layer that references external data sources, often used for dynamic content.
*   **Type ID (`ty`)**: 15
*   **Properties**: Extends `layer`, requires `ty` and `refId` (the ID of the data source).

### Unknown Layer Types

*   **Description**: Represents layer types that are not explicitly defined in the Lottie specification. The specification allows for custom types but does not define their behavior.
*   **Properties**: Contains a `ty` field that is not part of the known enum list.

### Image Layer

*   **Description**: A layer that displays an image. The image is referenced by its ID from the assets section.
*   **Type ID (`ty`)**: 2
*   **Properties**: Extends `visual-layer`, requires `ty` and `refId` (the ID of the image asset).

### Solid Layer

*   **Description**: A layer that displays a solid color. This type is defined but its properties are not detailed in the provided snippet.
```
Tokens:
Raw