### Lottie Playground Mask Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/helpers.md

An interactive example demonstrating how to control the opacity of a Lottie mask.

```html
<lottie-playground example="mask.json">
    <title>Example</title>
    <form>
        <input type="range" min="0" max="100" value="100" title="Opacity"/>
    </form>
    <json>lottie.layers[1].masksProperties[0]</json>
    <script>
        let mask = lottie.layers[1].masksProperties[0];
        mask.o.k = Number(data["Opacity"]);
    </script>
</lottie-playground>
```

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

### Lottie Playground Slots Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/helpers.md

An interactive example demonstrating how to control Lottie slots using form inputs.

```html
<lottie-playground example="slots.json">
    <form>
        <input title="Scale X" type="range" min="0" value="100" max="200"/>
        <input title="Scale Y" type="range" min="0" value="100" max="200"/>
        <input title="Rotation" type="range" min="-360" value="0" max="360"/>
        <input title="Opacity" type="range" min="0" value="100" max="100"/>
    </form>
    <json>lottie.slots</json>
    <script>
    lottie.slots.rotation.p.k = data["Rotation"];
    lottie.slots.opacity.p.k = data["Opacity"];
    lottie.slots.scale.p.k[0] = data["Scale X"];
    lottie.slots.scale.p.k[1] = data["Scale Y"];
    </script>
</lottie-playground>
```

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

### Gradient Fill Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/shapes.md

Configures a gradient fill for a Lottie animation. Use this to set the start and end points, type, highlight, and angle of the gradient.

```javascript
var gradient = lottie.layers[1].shapes[0].it[1];
var start_marker = lottie.layers[0].shapes[1].it[1];
var end_marker = lottie.layers[0].shapes[0].it[1];
gradient.s.k = start_marker.p.k = [data["Start X"], data["Start Y"]];
gradient.e.k = end_marker.p.k = [data["End X"], data["End Y"]];
gradient.t = Number(data["Type"]);
if ( gradient.t === 2 ) 
{
    gradient.h = {
        a: 0,
        k: data["Highlight"]
    };
}
else 
{
    delete gradient.h;
}
if ( gradient.t !== 1 ) 
{
    gradient.a = {
        a: 0,
        k: data["Angle"]
    };
} 
else 
{
    delete gradient.a;
}
```

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

### Lottie Path Playground Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/shapes.md

An interactive example demonstrating the 'path' shape in Lottie. Allows users to manipulate bezier curves in real-time.

```html
<lottie-playground example="path.json">
    <title>Example</title>
    <form>
        <input title="Shape" type="bezier"/>
    </form>
    <json>lottie.layers[0].shapes[0].it[0]</json>
    <script>
        var shape = lottie.layers[0].shapes[0].it[0];
        if ( data["Shape"] )
            shape.ks.k = data["Shape"];
    </script>
</lottie-playground>
```

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

### Install Python Dependencies

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/schema.md

Installs the necessary Python packages required for building the schema and documentation.

```bash
make install_dependencies
```

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

### Mask Mode and Opacity Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/constants.md

Sets the mask mode and opacity for masks. Requires the 'masks.json' example file. Adjusts opacity for Mask1 and Mask2.

```javascript
let mask1 = lottie.layers[1].masksProperties[0];
let mask2 = lottie.layers[1].masksProperties[1];
mask1.o.k = Number(data["Mask1 Opacity"]);
mask2.o.k = Number(data["Mask2 Opacity"]);
mask2.mode = data["Mask Mode"];
```

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

### Lottie PolyStar Playground Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/shapes.md

An interactive example for the 'polystar' shape in Lottie. Users can adjust properties like position, points, radius, and roundness.

```html
<lottie-playground example="star.json">
    <title>Example</title>
    <form>
        <input title="Position x" type="range" min="0" max="512" value="256"/>
        <input title="Position y" type="range" min="0" max="512" value="256"/>
        <input title="Points" type="range" min="3" max="10" value="5"/>
        <input title="Rotation" type="range" min="0" max="360" value="0"/>
        <input title="Outer Radius" type="range" min="0" max="300" value="200"/>
        <input title="Inner Radius" type="range" min="0" max="300" value="100"/>
        <input title="Outer Roundness" type="range" min="0" max="100" value="0"/>
        <input title="Inner Roundness" type="range" min="0" max="100" value="0"/>
        <enum title="Star Type">star-type</enum>
    </form>
    <json>lottie.layers[0].shapes[0].it[0]</json>
    <script>
        var star = {
            "ty": "sr",
            "nm": "PolyStar",
            "sy": Number(data["Star Type"]),
            "p": {
                "a": 0,
                "k": [data["Position x"], data["Position y"]]
            },
            "r": {
                "a": 0,
                "k": data["Rotation"]
            },
            "pt": {
                "a": 0,
                "k": data["Points"]
            },
            "or": {
                "a": 0,
                "k": data["Outer Radius"]
            },
            "os": {
                "a": 0,
                "k": data["Outer Roundness"]
            },
        };
        if ( data["Star Type"] == "1" )
        {
            star = {
                ...star,
                "ir": {
                    "a": 0,
                    "k": data["Inner Radius"]
                },
                "is": {
                    "a": 0,
                    "k": data["Inner Roundness"]
                },
            };
        }
        lottie.layers[0].shapes[0].it[0] = star;
    </script>
</lottie-playground>
```

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

### Serve Documentation Locally (Makefile)

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/schema.md

Equivalent to running 'mkdocs serve', this Makefile target starts a local development server for previewing documentation.

```bash
make docs_serve
```

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

### Serve Documentation Locally

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/schema.md

Starts a local development server to preview the documentation. The server automatically reloads when changes are detected in the /docs directory.

```bash
mkdocs serve
```

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

### Matte Mode Enumeration Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/constants.md

Applies the matte mode to a layer. Requires the 'matte.json' example file. The 'Matte Mode' enum value is directly applied.

```javascript
lottie.layers[1].tt = Number(data["Matte Mode"]);
```

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

### Animated Vector Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Demonstrates an animated vector property, like scale, animating between two values. The 'a' property is 1, and 'k' is an array of keyframes, each with a time 't' and a start value 's'.

```json
{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [100, 100],
            "o": {"x": [0.333, 0.333], "y": [0, 0]},
            "i": {"x": [0.667, 0.667], "y": [1, 1]}
        },
        {
            "t": 60,
            "s": [50, 50]
        }
    ],
    "ty": "v"
}
```

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

### Animated Position Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Shows an animated 2D position with spatial tangents. 'a' is 1, and 'k' contains keyframes with start 's', incoming 'ti', and outgoing 'to' tangents.

```json
{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [0, 0],
            "ti": [0, 0],
            "to": [42.667, 42.667],
            "o": {"x": [0.333], "y": [0]},
            "i": {"x": [0.667], "y": [1]}
        },
        {
            "t": 60,
            "s": [256, 256]
        }
    ],
    "ty": "v2"
}
```

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

### Precomposition Time Remap Examples

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/layers.md

Provides examples of using the 'tm' property for time remapping in precomposition layers. This allows for complex transformations of the precomp timeline, such as reversing, subsetting, or applying custom easing.

```javascript
const time_maps = [
    { 'a': 1, k: [
        { 't':   0, 's': [ 0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }},
        { 't': 600, 's': [10] }
    ]},
    { 'a': 1, k: [
        { 't':   0, 's': [10], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }},
        { 't': 600, 's': [ 0] }
    ]},
    { 'a': 1, k: [
        { 't':   0, 's': [3], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }},
        { 't': 600, 's': [7] }
    ]},
    { 'a': 1, k: [
        { 't':   0, 's': [ 0.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 },
        { 't': 150, 's': [ 2.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 },
        { 't': 300, 's': [ 5.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 },
        { 't': 450, 's': [ 7.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 },
        { 't': 600, 's': [10.0] }
    ]},
    { 'a': 1, k: [
        { 't':   0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [0.5], 'y': [1] }},
        { 't': 600, 's': [10] }
    ]},
    { 'a': 1, k: [
        { 't':   0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [1], 'y': [0.5] }},
        { 't': 600, 's': [10] }
    ]},
    { 'a': 1, k: [
        { 't':   0, 's': [ 0], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }},
        { 't': 300, 's': [ 7], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }},
        { 't': 600, 's': [ 0] }
    ]},
];
        const time_paths = [
            {
                'v': [[-250, 50], [250, -50]],
                'o': [[   0,  0], [  0,   0]],
                'i': [[   0,  0], [  0,   0]],
                'c': false
            }, {
                'v': [[250, 50], [-250, -50]],
                'o': [[  0,  0], [   0,   0]],
                'i': [[  0,  0], [   0,   0]],
                'c': false
            }, {
                'v': [[250, 20], [-250, -20]],

```

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

### Line Join and Miter Limit Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/constants.md

Configures the line join and miter limit for a stroke. Requires the 'stroke.json' example file. Also adjusts trim path end to 100%.

```javascript
var shape = lottie.layers[0].shapes[2];
shape.lj = Number(data["Line Join"]);
shape.ml = data["Miter Limit"]);
shape.d = undefined;
var trim = lottie.layers[0].shapes[1];
trim.e.k = 100;
```

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

### Static Color Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Example of a static red color property. Use this for solid color fills or strokes.

```json
{
    "a": 0,
    "k": [1, 0, 0],
    "ty": "c"
}
```

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

### Lottie Playground Example: Rectangle

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/shapes.md

An interactive example for configuring a rectangle shape in Lottie. It allows adjusting position, width, height, and corner roundness.

```javascript
lottie.layers[0].shapes[0].it[0].p.k = [
        data["Position x"], data["Position y"]
    ];
    lottie.layers[0].shapes[0].it[0].s.k = [
        data["Width"], data["Height"]
    ];
    lottie.layers[0].shapes[0].it[0].r.k = data["Roundness"];
```

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

### Animated Gradient Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Example of an animated gradient transitioning between two color configurations. The 'a' field within 'k' must be 1 for animation.

```json
{
    "p": 2,
    "k": {
        "a": 1,
        "k": [
            {
                "t": 0,
                "s": [0, 1, 0, 0, 1, 0, 0, 1],
                "o": {"x": [0.333], "y": [0]},
                "i": {"x": [0.667], "y": [1]}
            },
            {
                "t": 60,
                "s": [0, 0, 1, 0, 1, 1, 1, 0]
            }
        ]
    },
    "ty": "g"
}
```

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

### Static Gradient Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Example of a static gradient with three color stops. The 'p' field indicates the number of color stops.

```json
{
    "p": 3,
    "k": {
        "a": 0,
        "k": [0, 1, 0, 0, 0.5, 0, 1, 0, 1, 0, 0, 1]
    },
    "ty": "g"
}
```

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

### Animated Color Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Example of an animated color property transitioning from red to blue over time. The 'a' field must be 1 for animation.

```json
{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [1, 0, 0],
            "o": {"x": [0.333], "y": [0]},
            "i": {"x": [0.667], "y": [1]}
        },
        {
            "t": 60,
            "s": [0, 0, 1]
        }
    ],
    "ty": "c"
}
```

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

### Lottie Playground Example: Ellipse

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/shapes.md

An interactive example demonstrating how to configure an ellipse shape in Lottie. It allows adjusting position, width, and height using range inputs.

```javascript
lottie.layers[0].shapes[0].it[0].p.k = [
        data["Position x"], data["Position y"]
    ];
    lottie.layers[0].shapes[0].it[0].s.k = [
        data["Width"], data["Height"]
    ];
```

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

### Matte Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/layers.md

Demonstrates how to use a layer as a mask for another layer using the 'tt' and 'tp' attributes. The 'tt' attribute defines the matte mode, and 'tp' specifies the index of the layer being masked. The example shows a rectangle and a star being masked by an ellipse.

```JSON
{
    "layers": [
        {
            "ind": 0,
            "ty": 4,
            "nm": "Ellipse 1",
            "shapes": [
                {
                    "ty": "gr",
                    "it": [
                        {
                            "ind": 0,
                            "ty": "el",
                            "nm": "Ellipse Path 1",
                            "pts": [
                                [0, 0],
                                [100, 0],
                                [100, 100],
                                [0, 100]
                            ],
                            "closed": true
                        }
                    ]
                }
            ]
        },
        {
            "ind": 1,
            "ty": 4,
            "nm": "Rectangle 1",
            "shapes": [
                {
                    "ty": "gr",
                    "it": [
                        {
                            "ind": 0,
                            "ty": "sh",
                            "nm": "Rectangle Path 1",
                            "ks": {
                                "k": [
                                    0,
                                    0,
                                    100,
                                    100
                                ]
                            }
                        }
                    ]
                }
            ]
        }
    ]
}
```

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

### Example Metadata Object

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/composition.md

This JSON snippet demonstrates the structure of the 'meta' property, which can store authoring tool information, author name, description, keywords, and custom data.

```json
{
    "meta": {
        "g": "MyTool 1.0",
        "a": "Aidos S",
        "d": "Loading spinner animation",
        "k": ["spinner", "loading", "ui"],
        "custom": {
            "project_id": "abc-123",
            "exported_at": "2025-01-15T10:30:00Z"
        }
    }
}
```

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

### Star Type Enumeration Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/constants.md

Adjusts the star shape's properties based on the selected star type. Requires the 'star.json' example file.

```javascript
var star = lottie.layers[0].shapes[0].it[0];
star.sy = Number(data["Star Type"]);
if ( data["Star Type"] == "1" )
{
    star["ir"] = {"a": 0, "k": 100};
    star["is"] = {"a": 0, "k": 0};
}
else
{
    delete star["ir"];
    delete star["is"];
}
lottie.layers[0].shapes[0].it[0] = star;
```

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

### Lottie Playground Script Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/layers.md

Demonstrates how to dynamically set time remapping and shape paths for Lottie layers using a playground environment. This script modifies the 'tm' property for time remapping and 'ks.k' for shape paths based on sample data.

```javascript
const sample_index = data["Time Remap"];
        const precomp_layer = lottie.layers[1];
        precomp_layer.tm = time_maps[sample_index];
        const time_shape = lottie.layers[0].shapes[1].it[0];
        time_shape.ks.k = time_paths[sample_index];
```

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

### Gradient Type Enumeration Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/constants.md

Sets the gradient type for a shape. Requires the 'gradient.json' example file. The 'Type' enum value is directly applied.

```javascript
var gradient = lottie.layers[1].shapes[0].it[1];
gradient.t = Number(data["Type"]);
```

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

### Precomposition Time Stretch Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/layers.md

Demonstrates how to use the 'sr' property to control the time stretch factor of a precomposition layer. Adjusting this value alters the playback speed of the precomp.

```javascript
var layer = lottie.layers[0];
layer.sr =  Number(data["Time Stretch"]);
```

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

### Pucker/Bloat Modifier Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/shapes.md

This interactive example demonstrates the pucker and bloat modifier for Lottie shapes. The 'Amount' slider controls the effect: positive values pull vertices towards the center, while negative values push them away. The 'a' property determines the magnitude and direction of the effect.

```json
{
  "a": {
    "k": 50,
    "a": 1
  }
}
```

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

### Line Cap Enumeration Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/constants.md

Sets the line cap property for a shape. Requires the 'stroke.json' example file. The 'Line Cap' enum value is directly applied.

```javascript
var shape = lottie.layers[0].shapes[2];
shape.lc = Number(data["Line Cap"]);
shape.d = undefined;
```

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

### Gradient Stroke Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/shapes.md

Configures a gradient stroke for a Lottie animation. Similar to gradient fill, this allows control over gradient properties like start/end points, type, highlight, and angle.

```javascript
var gradient = lottie.layers[1].shapes[1];
var start_marker = lottie.layers[0].shapes[1].it[1];
var end_marker = lottie.layers[0].shapes[0].it[1];
gradient.s.k = start_marker.p.k = [data["Start X"], data["Start Y"]];
gradient.e.k = end_marker.p.k = [data["End X"], data["End Y"]];
gradient.t = Number(data["Type"]);
if ( gradient.t === 2 ) 
{
    gradient.h = {
        a: 0,
        k: data["Highlight"]
    };
}
else 
{
    delete gradient.h;
}
if ( gradient.t !== 1 ) 
{
    gradient.a = {
        a: 0,
        k: data["Angle"]
    };
} 
else 
{
    delete gradient.a;
}
```

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

### Static Position Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Defines a static 2D position. 'a' is 0, and 'k' holds the [x, y] coordinates.

```json
{
    "a": 0,
    "k": [256, 256],
    "ty": "v2"
}
```

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

### Shape Path Data Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/layers.md

Illustrates the structure of shape path data, including vertices ('v'), outgoing tangents ('o'), and incoming tangents ('i'). This data is crucial for defining complex shapes and animations.

```javascript
const time_paths = [
            {
                'v': [[-250, 50], [0, 50], [250, 50]],
                'o': [[0, 0], [0, 0], [0, 0]],
                'i': [[0, 0], [0, 0], [0, 0]],
                'c': false
            }, {
                'v': [[-250, 50], [-125, 50], [-125, 25], [0, 25], [0, 0], [125, 0], [125, -25], [250, -25]],
                'o': [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
                'i': [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
                'c': false
            }, {
                'v': [[-250, 50], [250, -50]],
                'o': [[0, -50], [0, 0]],
                'i': [[0, 0], [-250, 0]],
                'c': false
            }, {
                'v': [[-250, 50], [250, -50]],
                'o': [[0, -50], [0, 0]],
                'i': [[0, 0], [0, 50]],
                'c': false
            }, {
                'v': [[-250, 50], [0, -20], [250, 50]],
                'o': [[100, 0], [100, 0], [0, 0]],
                'i': [[0, 0], [-100, 0], [-100, 0]],
                'c': false
            },
        ];
```

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

### Static Scalar Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Shows a static scalar property, like opacity. 'a' is 0 for non-animated, and 'k' contains the single numerical value.

```json
{
    "a": 0,
    "k": 100,
    "ty": "s"
}
```

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

### Animated Bezier Shape Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Demonstrates an animated Bezier shape, morphing between two path definitions. 'a' is 1, and 'k' is an array of keyframes, where each 's' value defines the shape at that time.

```json
{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [{
                "c": true,
                "v": [[256, 0], [512, 512], [0, 512]],
                "i": [[0, 0], [0, 0], [0, 0]],
                "o": [[0, 0], [0, 0], [0, 0]]
            }],
            "o": {"x": [0.333], "y": [0]},
            "i": {"x": [0.667], "y": [1]}
        },
        {
            "t": 60,
            "s": [{
                "c": true,
                "v": [[256, 0], [512, 256], [0, 256]],
                "i": [[0, 0], [0, 0], [0, 0]],
                "o": [[0, 0], [0, 0], [0, 0]]
            }]
        }
    ],
    "ty": "b"
}
```

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

### Control Trim Path Multiple Shapes in Lottie Animation

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/constants.md

This example demonstrates how to control the 'Multiple Shapes' property for trim paths in a Lottie animation. The value is set based on a form input.

```javascript
lottie.layers[0].shapes[4].m = Number(data["Multiple Shapes"]);
```

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

### Gradient with transparency example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/values.md

Represents a gradient with both color and opacity stops. Color stops are followed by opacity stops, each with an offset and corresponding value (RGB for color, alpha for opacity).

```json
0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1
```

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

### Control Fill Rule in Lottie Animation

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/constants.md

This example shows how to set the fill rule for a shape within a Lottie animation using JavaScript. The 'Fill Rule' is controlled via a form input.

```javascript
var shape = lottie.layers[0].shapes[0].it[1];
shape.r = Number(data["Fill Rule"]);
```

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

### Control Layer Blend Mode in Lottie Animation

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/constants.md

This example demonstrates how to dynamically change the blend mode of a layer in a Lottie animation using JavaScript. It also allows adjusting the layer's opacity.

```javascript
lottie.layers[0].bm = Number(data["Blend Mode"]);
lottie.layers[0].ks.o.k = data["Opacity"];
```

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

### Gradient Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/values.md

Defines a gradient that changes colors across a circle around a point. 's' indicates the center, 'a' is the initial angle in degrees (defaults to 0). Offset values represent portions of a turn around the circle clockwise.

```json
{
  "ty": "gr",
  "s": {
    "x": 50,
    "y": 50
  },
  "a": 0,
  "k": [
    {
      "s": [255, 0, 0, 255],
      "e": [0, 0, 255, 255]
    }
  ]
}
```

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

### Static Bezier Shape Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Represents a static Bezier shape, like a triangular path. 'a' is 0, and 'k' is an object containing 'c' (closed), 'v' (vertices), 'i' (in-tangents), and 'o' (out-tangents).

```json
{
    "a": 0,
    "k": {
        "c": true,
        "v": [[256, 0], [512, 512], [0, 512]],
        "i": [[0, 0], [0, 0], [0, 0]],
        "o": [[0, 0], [0, 0], [0, 0]]
    },
    "ty": "b"
}
```

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

### Trim Path Modifier Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/shapes.md

Applies a trim path effect to shapes in a Lottie animation. This modifier controls the start, end, and offset of the path rendering, and can be applied to multiple shapes.

```javascript
lottie.layers[0].shapes[4].s.k = data["Start"];
lottie.layers[0].shapes[4].e.k = data["End"];
lottie.layers[0].shapes[4].o.k = data["Offset"];
lottie.layers[0].shapes[4].m = Number(data["Multiple Shapes"]);
```

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

### Build Static HTML Documentation

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/schema.md

Generates a static HTML version of the documentation. The output will be placed in the /site directory.

```bash
mkdocs build -d site
```

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

### Build Schema and Docs (Makefile)

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/schema.md

A convenience target in the Makefile to perform common build tasks, including schema generation and HTML documentation creation.

```bash
make
```

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

### Deploy New Version with Mike

Source: https://github.com/lottie/lottie-spec/wiki/Building-and-Deploying

Use this command to create a new version of the documentation and publish it under a specified version number. Changes are committed to the 'gh-pages' branch.

```bash
tools/mike deploy 1.2
```

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

### Build Combined Schema

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/schema.md

Run this command to generate the single, combined Lottie schema file. This should be executed after any schema changes.

```bash
schema-merge.py
```

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

### Serve Versioned Docs Locally

Source: https://github.com/lottie/lottie-spec/wiki/Building-and-Deploying

Locally view the documentation with versioning enabled. This command serves the docs based on the content of the 'gh-pages' branch.

```bash
tools/mike serve
```

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

### Rounded Corners Modifier Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/shapes.md

This interactive example demonstrates the rounded corners modifier for Lottie shapes. Adjust the 'Roundness' slider to see how the modifier affects the shape's vertices. The 'r' property controls the roundness distance.

```json
{
  "r": {
    "k": 50,
    "a": 1
  }
}
```

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

### Link to Schema Section

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/extensions.md

Use `link` to create a hyperlink to a relevant section within the Lottie specifications. Ensure the path is correct.

```markdown
{link:shapes/ellipse}
```

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

### Build Combined Schema (Makefile)

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/schema.md

This Makefile target specifically builds the combined schema file ('lottie.schema.json') without generating HTML documentation.

```bash
make lottie.schema.json
```

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

### Invalid Scalar to Vector Slot Reference

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/helpers.md

An invalid example demonstrating a type mismatch where a scalar slot is referenced by a vector property.

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

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

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

### Run Full Validation (Makefile)

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/schema.md

This Makefile target runs a comprehensive validation process, which includes building the HTML pages before performing schema validation.

```bash
make validate_full
```

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

### Bezier Shape Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/values.md

Defines a Bezier curve for shape animation. This is typically used within shape layers to create custom paths.

```json
{
  "i": [
    [0.75, 0, 0.25, 1]
  ],
  "o": [
    [0.75, 0, 0.25, 1]
  ],
  "t": [
    [0, 0]
  ],
  "s": [
    [0, 0]
  ]
}
```

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

### Gradient without transparency example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/values.md

Represents a gradient with color stops. Each color stop includes an offset and RGB components. The array is a flattened list of these values.

```json
0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96
```

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

### Static Vector Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Represents a static vector value, such as a scale. The 'a' property is 0, indicating it's not animated, and 'k' holds the direct vector value.

```json
{
    "a": 0,
    "k": [100, 100],
    "ty": "v"
}
```

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

### Link to Glossary Terms

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/extensions.md

Link to glossary terms using Mediawiki-style syntax. You can link directly to a term or provide custom display text.

```mediawiki
[[local coordinates]] or [[local coordinates|coordinate system]]
```

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

### Animated Scalar Property Example

Source: https://github.com/lottie/lottie-spec/blob/main/docs/specs/properties.md

Illustrates an animated scalar property, such as rotation. 'a' is 1, and 'k' is an array of keyframes. Each keyframe's 's' value is an array containing a single scalar.

```json
{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [0],
            "o": {"x": [0], "y": [0]},
            "i": {"x": [1], "y": [1]}
        },
        {
            "t": 60,
            "s": [360]
        }
    ],
    "ty": "s"
}
```

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

### Preview Lottie Color Array

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/extensions.md

Use `{lottie_color}` to display an inline preview of a Lottie color array. Provide the color components (R, G, B) as arguments.

```markdown
{lottie_color:1, 0.5, 0}
```

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

### Preview Lottie Gradient

Source: https://github.com/lottie/lottie-spec/blob/main/docs/editing/extensions.md

Use `{lottie_gradient}` to show an inline preview of a Lottie gradient. Provide the color stops and opacity values as arguments, excluding alpha.

```markdown
{lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96}
```