Skip to content

More fixes #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 15, 2025
Merged

More fixes #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b37180
Parse shape_bezier_script early
mbasaglia Jun 26, 2025
d72d396
Fix rendering of modifiers
mbasaglia Jun 26, 2025
b2385f2
Convert star
mbasaglia Jun 26, 2025
0efd21f
Fix image example
mbasaglia Jul 8, 2025
68c89c0
Improve playgrounds
mbasaglia Oct 15, 2025
5b8b9e3
Fix links
mbasaglia Oct 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/assets.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ Assets are usually referenced by [layers](layers.md) of the appropriate type.
{schema_object:assets/asset}


<h2 id="file-asset">File Asset</h2>

{schema_string:assets/file-asset/description}

{schema_object:assets/file-asset}

### Image

Represents a (static) image
Expand Down
6 changes: 3 additions & 3 deletions docs/breakdown/bouncy_ball.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ This layer does not have any transform so everything is at its default value.

You might have noticed that all the attributes of the transform are objects with the same structure.

This is because they are [animatable properties](../properties.md#animated-property).
This is because they are [animatable properties](../properties.md#property).
In this case they don't have any animations applied to them so `a` is `0` and `k` is the actual value.

If they were animated, `a` would be `1` and `k` would have a list of keyframes (more on this later).
Expand Down Expand Up @@ -234,7 +234,7 @@ An ellipse by itself doesn't actually draw anything. it just defines the shape.
So we need to apply some style to it. Here we have a [fill shape](../shapes.md#fill)
that determines the fill color for the ellipse.

`r` is not animated and it determines the [fill rule](../constants.md#fillrule).
`r` is not animated and it determines the [fill rule](../constants.md#fill-rule).

`o` is the opacity, as a percentage.

Expand Down Expand Up @@ -266,7 +266,7 @@ In this case it represents this color: {lottie_color:0.710,0.192,0.278}.
}
```

Unlike layers, that have the transform as an attribute, groups have them as a [shape](../shapes.md#transform-shape).
Unlike layers, that have the transform as an attribute, groups have them as a [shape](../shapes.md#transform).

Note that this might give you a false sense of flexibility, because players
expect to have a transform shape at the end of their shape list.
Expand Down
3 changes: 1 addition & 2 deletions docs/effects.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,8 +353,7 @@ Sometimes these are used together with expressions.
{schema_object:effects/custom-effect}



## Effect Values
<h2 id="effect-value">Effect Values</h2>

{schema_object:effect-values/effect-value}

Expand Down
6 changes: 3 additions & 3 deletions docs/layers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ follows the path (`ao` is 1).
A matte allows using a layer as a mask for another layer.

The way it works is the layer defining the mask has a `tt` attribute with the
appropriate [value](constants.md#mattemode).
appropriate [value](constants.md#matte-mode).
By defaults it affects the layer on top (the layer before it in the layer list, which has the `td` attribute),
otherwise check the `tp` attribute.

Expand Down Expand Up @@ -103,7 +103,7 @@ A layer can have an array of {link:helpers/mask:masks} that clip the contents of
This is similar to [mattes](#mattes), but there are a few differences.

With mattes, you use a layer to define the clipping area, while with masks
you use an [animated](properties.md#animated-property) {link:values/bezier:bezier curve}.
you use an {link:properties/bezier-property:animated bezier curve}.

<lottie-playground example="mask.json">
<title>Example</title>
Expand Down Expand Up @@ -144,7 +144,7 @@ This means the render order goes from the last element to the first.

Renders vector data.

The only special property for this layer is **shapes**, an [array](layers.md#lists-of-layers-and-shapes) of [shapes](shapes.md#shape-element).
The only special property for this layer is **shapes**, an [array](layers.md#lists-of-layers-and-shapes) of [shapes](shapes.md#graphic-element).

{schema_object:layers/shape-layer}

Expand Down
202 changes: 201 additions & 1 deletion docs/rendering.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,207 @@ let converter_map = {};

function convert_shape(shape)
{
return converter_map[shape.ty](shape);
let lottie_bez = {
"c": true,
"v": [
[
256,
96
],
[
408.1690426072246,
206.5572809000084
],
[
350.04564036679574,
385.44271909999156
],
[
161.95435963320432,
385.44271909999156
],
[
103.83095739277542,
206.55728090000844
]
],
"i": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"o": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
]
};
if ( shape.sy == 1 )
lottie_bez = {
"c": true,
"v": [
[
250.84172204836955,
33.33731381001252
],
[
319.3523543268615,
164.41507157596521
],
[
466.1708030880071,
182.28763209535816
],
[
362.679397092767,
287.9503700935611
],
[
391.05097770288023,
433.10593743368196
],
[
258.5791389758152,
367.3313430949937
],
[
129.2952913462771,
439.16985684806957
],
[
150.91459845599647,
292.8561839523209
],
[
42.641205814466105,
192.09925981287776
],
[
188.47451114855988,
167.44703128315905
]
],
"i": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"o": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
]
};
return Bezier.from_lottie(lottie_bez);
// return converter_map[shape.ty](shape);
}

</script>
Expand Down
19 changes: 12 additions & 7 deletions docs/shapes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ The `ty` property defines the specific element type based on the following value
<h2 id="shape">Shapes</h2>

These shapes only define path data, to actually show something, they must be
followed by some [style shape](#style).
followed by some [style shape](#shape-style).

They have a `d` attribute which specifies the drawing direction, which
can be seen when using [Trim Path](#trim-path).
Expand Down Expand Up @@ -177,7 +177,7 @@ can be seen when using [Trim Path](#trim-path).
<h2 id="shape-style">Style</h2>


These apply a style (such as fill stroke) to the paths defined by the [shapes](#shapes).
These apply a style (such as fill stroke) to the paths defined by the [shapes](#shape).

Each style is applied to all preceding shapes in the same group / layer.

Expand Down Expand Up @@ -292,8 +292,13 @@ Offset entry, if present, MUST be at the end of the array.
</script>
</lottie-playground>

<h3 id="base-gradient">Base Gradient</h3>

<h3 id="gradient-fill"><span id="gradient-fill">Gradient Fill</span></h3>
{schema_string:shapes/base-gradient/description}

{schema_object:shapes/base-gradient}

<h3 id="gradient-fill">Gradient Fill</h3>

{schema_string:shapes/gradient-fill/description}

Expand Down Expand Up @@ -390,8 +395,8 @@ A group is a shape that can contain other shapes (including other groups).

The usual contents of a group are:

* [Shapes](#shapes)
* [Style](#style)
* [Shapes](#shape)
* [Style](#shape-style)
* [Transform](#transform)

For example, if you want to have a red rectangle with a black outline, its group will contain
Expand Down Expand Up @@ -419,7 +424,7 @@ the last item in the `it` array.

<h2 id="modifier">Modifiers</h2>

Modifiers process their siblings and alter the path defined by [shapes](#shapes).
Modifiers process their siblings and alter the path defined by [shapes](#shape).

<h3 id="repeater">Repeater</h3>

Expand Down Expand Up @@ -477,7 +482,7 @@ The first copy will use `so`, the last `eo`, and copies between them will have a

This is mostly useful for shapes with a stroke and not a fill.

It takes the path defined by [shapes](#shapes) and only shows a segment of the resulting bezier data.
It takes the path defined by [shapes](#shape) and only shows a segment of the resulting bezier data.


{schema_object:shapes/trim-path}
Expand Down
4 changes: 2 additions & 2 deletions docs/static/examples/image.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
"id": "blep",
"h": 512,
"w": 512,
"p": "blep.png",
"p": "/lottie-docs/static/examples/blep.png",
"u": "",
"e": 0
"e": 1
}
],
"layers": [
Expand Down
28 changes: 28 additions & 0 deletions docs/style/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,3 +262,31 @@ input[type="color"]
position: absolute;
right: 0;
}

#content-container {
width: 100%;
}

/* playgrounds */

.playground-columns {
display: flex;
align-items: center;
justify-content: stretch;
flex-flow: row wrap;
}

.json-parent {
flex: 1 1 0;
align-self: stretch;
min-width: 256px;
}

.json-parent pre {
margin: 0;
height: 100%;
}

.json-parent code {
height: 100%;
}
Loading