Skip to content

Commit

Permalink
Use the embedded value editors around the docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbasaglia
mbasaglia committed Jul 4, 2022
1 parent 2088393 commit 76668b2
Show file tree
Hide file tree
Showing 8 changed files with 870 additions and 868 deletions.
64 changes: 1 addition & 63 deletions docs/breakdown/bezier.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,66 +83,4 @@ as an object with the following attributes:
If it is, there's an additional bezier segment between the last point in `v` and the first.


{lottie_playground:bezier.json:512:512}
Closed:<input type="checkbox" />
Point 0:
Vertex X:<input type="range" min="0" value="53" max="512" name="Point 0 Vertex X"/>
Vertex Y:<input type="range" min="0" value="325" max="512" name="Point 0 Vertex Y"/>
In Tangent X:<input type="range" min="-512" value="0" max="512" name="Point 0 In Tangent X"/>
In Tangent Y:<input type="range" min="-512" value="0" max="512" name="Point 0 In Tangent Y"/>
Out Tangent X:<input type="range" min="-512" value="89" max="512" name="Point 0 Out Tangent X"/>
Out Tangent Y:<input type="range" min="-512" value="-189" max="512" name="Point 0 Out Tangent Y"/>
Point 1:
Vertex X:<input type="range" min="0" value="429" max="512" name="Point 1 Vertex X"/>
Vertex Y:<input type="range" min="0" value="147" max="512" name="Point 1 Vertex Y"/>
In Tangent X:<input type="range" min="-512" value="-147" max="512" name="Point 1 In Tangent X"/>
In Tangent Y:<input type="range" min="-512" value="186" max="512" name="Point 1 In Tangent Y"/>
Out Tangent X:<input type="range" min="-512" value="40" max="512" name="Point 1 Out Tangent X"/>
Out Tangent Y:<input type="range" min="-512" value="189" max="512" name="Point 1 Out Tangent Y"/>
Point 2:
Vertex X:<input type="range" min="0" value="215" max="512" name="Point 2 Vertex X"/>
Vertex Y:<input type="range" min="0" value="430" max="512" name="Point 2 Vertex Y"/>
In Tangent X:<input type="range" min="-512" value="114" max="512" name="Point 2 In Tangent X"/>
In Tangent Y:<input type="range" min="-512" value="36" max="512" name="Point 2 In Tangent Y"/>
Out Tangent X:<input type="range" min="-512" value="-114" max="512" name="Point 2 Out Tangent X"/>
Out Tangent Y:<input type="range" min="-512" value="-16" max="512" name="Point 2 Out Tangent Y"/>
<json>lottie.layers[0].shapes[0].ks.k</json>
<script>
lottie.layers[0].shapes[0].ks.k.c = data["Closed"];
lottie.layers[0].shapes[0].ks.k.v[0][0] = data["Point 0 Vertex X"];
lottie.assets[0].layers[0].ks.p.k[0] = data["Point 0 Vertex X"];
lottie.layers[0].shapes[0].ks.k.v[0][1] = data["Point 0 Vertex Y"];
lottie.assets[0].layers[0].ks.p.k[1] = data["Point 0 Vertex Y"];
lottie.layers[0].shapes[0].ks.k.i[0][0] = data["Point 0 In Tangent X"];
lottie.assets[0].layers[0].shapes[0].ks.k.v[0][0] = data["Point 0 In Tangent X"];
lottie.layers[0].shapes[0].ks.k.i[0][1] = data["Point 0 In Tangent Y"];
lottie.assets[0].layers[0].shapes[0].ks.k.v[0][1] = data["Point 0 In Tangent Y"];
lottie.layers[0].shapes[0].ks.k.o[0][0] = data["Point 0 Out Tangent X"];
lottie.assets[0].layers[0].shapes[0].ks.k.v[2][0] = data["Point 0 Out Tangent X"];
lottie.layers[0].shapes[0].ks.k.o[0][1] = data["Point 0 Out Tangent Y"];
lottie.assets[0].layers[0].shapes[0].ks.k.v[2][1] = data["Point 0 Out Tangent Y"];
lottie.layers[0].shapes[0].ks.k.v[1][0] = data["Point 1 Vertex X"];
lottie.assets[1].layers[0].ks.p.k[0] = data["Point 1 Vertex X"];
lottie.layers[0].shapes[0].ks.k.v[1][1] = data["Point 1 Vertex Y"];
lottie.assets[1].layers[0].ks.p.k[1] = data["Point 1 Vertex Y"];
lottie.layers[0].shapes[0].ks.k.i[1][0] = data["Point 1 In Tangent X"];
lottie.assets[1].layers[0].shapes[0].ks.k.v[0][0] = data["Point 1 In Tangent X"];
lottie.layers[0].shapes[0].ks.k.i[1][1] = data["Point 1 In Tangent Y"];
lottie.assets[1].layers[0].shapes[0].ks.k.v[0][1] = data["Point 1 In Tangent Y"];
lottie.layers[0].shapes[0].ks.k.o[1][0] = data["Point 1 Out Tangent X"];
lottie.assets[1].layers[0].shapes[0].ks.k.v[2][0] = data["Point 1 Out Tangent X"];
lottie.layers[0].shapes[0].ks.k.o[1][1] = data["Point 1 Out Tangent Y"];
lottie.assets[1].layers[0].shapes[0].ks.k.v[2][1] = data["Point 1 Out Tangent Y"];
lottie.layers[0].shapes[0].ks.k.v[2][0] = data["Point 2 Vertex X"];
lottie.assets[2].layers[0].ks.p.k[0] = data["Point 2 Vertex X"];
lottie.layers[0].shapes[0].ks.k.v[2][1] = data["Point 2 Vertex Y"];
lottie.assets[2].layers[0].ks.p.k[1] = data["Point 2 Vertex Y"];
lottie.layers[0].shapes[0].ks.k.i[2][0] = data["Point 2 In Tangent X"];
lottie.assets[2].layers[0].shapes[0].ks.k.v[0][0] = data["Point 2 In Tangent X"];
lottie.layers[0].shapes[0].ks.k.i[2][1] = data["Point 2 In Tangent Y"];
lottie.assets[2].layers[0].shapes[0].ks.k.v[0][1] = data["Point 2 In Tangent Y"];
lottie.layers[0].shapes[0].ks.k.o[2][0] = data["Point 2 Out Tangent X"];
lottie.assets[2].layers[0].shapes[0].ks.k.v[2][0] = data["Point 2 Out Tangent X"];
lottie.layers[0].shapes[0].ks.k.o[2][1] = data["Point 2 Out Tangent Y"];
lottie.assets[2].layers[0].shapes[0].ks.k.v[2][1] = data["Point 2 Out Tangent Y"];
</script>
{editor_example:bezier}
105 changes: 4 additions & 101 deletions docs/concepts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ It's the same array as the case without transparency but with the following valu
| `1` | Offset of the 3rd color (`1` means at the end) |
| `1` | Alpha component for the 3rd color |

### Gradient Example

{editor_example:gradient}

## Lists of layers and shapes

Expand Down Expand Up @@ -182,44 +184,7 @@ need to determine its value based on the `s` value of the previous keyframe.
In the following example, the ball moves left and right, on the background
you can see a representation of its easing function.

{lottie_playground:easing.json:512:512}
Out tangent x:<input type="range" min="0" value="0.33" max="1" step="0.01"/>
Out tangent y:<input type="range" min="0" value="0" max="1" step="0.01"/>
In tangent x:<input type="range" min="0" value="0.67" max="1" step="0.01"/>
In tangent y:<input type="range" min="0" value="1" max="1" step="0.01"/>
Hold:<input type="checkbox" />
<json>lottie.layers[0].ks.p</json>
<script>
lottie.assets[0].layers[1].shapes[0].ks.k.o[1][0] = data["Out tangent x"];
lottie.assets[0].layers[1].shapes[0].ks.k.v[0][0] = data["Out tangent x"];
lottie.assets[0].layers[0].shapes[0].p.k[0] = data["Out tangent x"];
lottie.layers[0].ks.p.k[0].o.x[0] = data["Out tangent x"];
lottie.layers[0].ks.p.k[0].o.x[1] = data["Out tangent x"];
lottie.layers[0].ks.p.k[1].o.x[0] = data["Out tangent x"];
lottie.layers[0].ks.p.k[1].o.x[1] = data["Out tangent x"];
lottie.assets[0].layers[1].shapes[0].ks.k.o[1][1] = data["Out tangent y"];
lottie.assets[0].layers[1].shapes[0].ks.k.v[0][1] = data["Out tangent y"];
lottie.assets[0].layers[0].shapes[0].p.k[1] = data["Out tangent y"];
lottie.layers[0].ks.p.k[0].o.y[0] = data["Out tangent y"];
lottie.layers[0].ks.p.k[0].o.y[1] = data["Out tangent y"];
lottie.layers[0].ks.p.k[1].o.y[0] = data["Out tangent y"];
lottie.layers[0].ks.p.k[1].o.y[1] = data["Out tangent y"];
lottie.assets[0].layers[1].shapes[0].ks.k.i[2][0] = data["In tangent x"] - 1;
lottie.assets[0].layers[1].shapes[0].ks.k.v[3][0] = data["In tangent x"];
lottie.assets[0].layers[0].shapes[1].p.k[0] = data["In tangent x"];
lottie.layers[0].ks.p.k[0].i.x[0] = data["In tangent x"];
lottie.layers[0].ks.p.k[0].i.x[1] = data["In tangent x"];
lottie.layers[0].ks.p.k[1].i.x[0] = data["In tangent x"];
lottie.layers[0].ks.p.k[1].i.x[1] = data["In tangent x"];
lottie.assets[0].layers[1].shapes[0].ks.k.i[2][1] = data["In tangent y"] - 1;
lottie.assets[0].layers[1].shapes[0].ks.k.v[3][1] = data["In tangent y"];
lottie.assets[0].layers[0].shapes[1].p.k[1] = data["In tangent y"];
lottie.layers[0].ks.p.k[0].i.y[0] = data["In tangent y"];
lottie.layers[0].ks.p.k[0].i.y[1] = data["In tangent y"];
lottie.layers[0].ks.p.k[1].i.y[0] = data["In tangent y"];
lottie.layers[0].ks.p.k[1].i.y[1] = data["In tangent y"];
lottie.layers[0].ks.p.k[0].h = lottie.layers[0].ks.p.k[1].h = Number(data["Hold"]);
</script>
{editor_example:easing}

### Animated Position

Expand Down Expand Up @@ -317,66 +282,4 @@ If you want it quadratic, set them to 2/3rd of what the quadratic control point
If you want a point to be smooth you need to make sure that `i = -o`.


{lottie_playground:bezier.json:512:512}
Closed:<input type="checkbox" />
Point 0:
Vertex X:<input type="range" min="0" value="53" max="512" name="Point 0 Vertex X"/>
Vertex Y:<input type="range" min="0" value="325" max="512" name="Point 0 Vertex Y"/>
In Tangent X:<input type="range" min="-512" value="0" max="512" name="Point 0 In Tangent X"/>
In Tangent Y:<input type="range" min="-512" value="0" max="512" name="Point 0 In Tangent Y"/>
Out Tangent X:<input type="range" min="-512" value="89" max="512" name="Point 0 Out Tangent X"/>
Out Tangent Y:<input type="range" min="-512" value="-189" max="512" name="Point 0 Out Tangent Y"/>
Point 1:
Vertex X:<input type="range" min="0" value="429" max="512" name="Point 1 Vertex X"/>
Vertex Y:<input type="range" min="0" value="147" max="512" name="Point 1 Vertex Y"/>
In Tangent X:<input type="range" min="-512" value="-147" max="512" name="Point 1 In Tangent X"/>
In Tangent Y:<input type="range" min="-512" value="186" max="512" name="Point 1 In Tangent Y"/>
Out Tangent X:<input type="range" min="-512" value="40" max="512" name="Point 1 Out Tangent X"/>
Out Tangent Y:<input type="range" min="-512" value="189" max="512" name="Point 1 Out Tangent Y"/>
Point 2:
Vertex X:<input type="range" min="0" value="215" max="512" name="Point 2 Vertex X"/>
Vertex Y:<input type="range" min="0" value="430" max="512" name="Point 2 Vertex Y"/>
In Tangent X:<input type="range" min="-512" value="114" max="512" name="Point 2 In Tangent X"/>
In Tangent Y:<input type="range" min="-512" value="36" max="512" name="Point 2 In Tangent Y"/>
Out Tangent X:<input type="range" min="-512" value="-114" max="512" name="Point 2 Out Tangent X"/>
Out Tangent Y:<input type="range" min="-512" value="-16" max="512" name="Point 2 Out Tangent Y"/>
<json>lottie.layers[0].shapes[0].ks.k</json>
<script>
lottie.layers[0].shapes[0].ks.k.c = data["Closed"];
lottie.layers[0].shapes[0].ks.k.v[0][0] = data["Point 0 Vertex X"];
lottie.assets[0].layers[0].ks.p.k[0] = data["Point 0 Vertex X"];
lottie.layers[0].shapes[0].ks.k.v[0][1] = data["Point 0 Vertex Y"];
lottie.assets[0].layers[0].ks.p.k[1] = data["Point 0 Vertex Y"];
lottie.layers[0].shapes[0].ks.k.i[0][0] = data["Point 0 In Tangent X"];
lottie.assets[0].layers[0].shapes[0].ks.k.v[0][0] = data["Point 0 In Tangent X"];
lottie.layers[0].shapes[0].ks.k.i[0][1] = data["Point 0 In Tangent Y"];
lottie.assets[0].layers[0].shapes[0].ks.k.v[0][1] = data["Point 0 In Tangent Y"];
lottie.layers[0].shapes[0].ks.k.o[0][0] = data["Point 0 Out Tangent X"];
lottie.assets[0].layers[0].shapes[0].ks.k.v[2][0] = data["Point 0 Out Tangent X"];
lottie.layers[0].shapes[0].ks.k.o[0][1] = data["Point 0 Out Tangent Y"];
lottie.assets[0].layers[0].shapes[0].ks.k.v[2][1] = data["Point 0 Out Tangent Y"];
lottie.layers[0].shapes[0].ks.k.v[1][0] = data["Point 1 Vertex X"];
lottie.assets[1].layers[0].ks.p.k[0] = data["Point 1 Vertex X"];
lottie.layers[0].shapes[0].ks.k.v[1][1] = data["Point 1 Vertex Y"];
lottie.assets[1].layers[0].ks.p.k[1] = data["Point 1 Vertex Y"];
lottie.layers[0].shapes[0].ks.k.i[1][0] = data["Point 1 In Tangent X"];
lottie.assets[1].layers[0].shapes[0].ks.k.v[0][0] = data["Point 1 In Tangent X"];
lottie.layers[0].shapes[0].ks.k.i[1][1] = data["Point 1 In Tangent Y"];
lottie.assets[1].layers[0].shapes[0].ks.k.v[0][1] = data["Point 1 In Tangent Y"];
lottie.layers[0].shapes[0].ks.k.o[1][0] = data["Point 1 Out Tangent X"];
lottie.assets[1].layers[0].shapes[0].ks.k.v[2][0] = data["Point 1 Out Tangent X"];
lottie.layers[0].shapes[0].ks.k.o[1][1] = data["Point 1 Out Tangent Y"];
lottie.assets[1].layers[0].shapes[0].ks.k.v[2][1] = data["Point 1 Out Tangent Y"];
lottie.layers[0].shapes[0].ks.k.v[2][0] = data["Point 2 Vertex X"];
lottie.assets[2].layers[0].ks.p.k[0] = data["Point 2 Vertex X"];
lottie.layers[0].shapes[0].ks.k.v[2][1] = data["Point 2 Vertex Y"];
lottie.assets[2].layers[0].ks.p.k[1] = data["Point 2 Vertex Y"];
lottie.layers[0].shapes[0].ks.k.i[2][0] = data["Point 2 In Tangent X"];
lottie.assets[2].layers[0].shapes[0].ks.k.v[0][0] = data["Point 2 In Tangent X"];
lottie.layers[0].shapes[0].ks.k.i[2][1] = data["Point 2 In Tangent Y"];
lottie.assets[2].layers[0].shapes[0].ks.k.v[0][1] = data["Point 2 In Tangent Y"];
lottie.layers[0].shapes[0].ks.k.o[2][0] = data["Point 2 Out Tangent X"];
lottie.assets[2].layers[0].shapes[0].ks.k.v[2][0] = data["Point 2 Out Tangent X"];
lottie.layers[0].shapes[0].ks.k.o[2][1] = data["Point 2 Out Tangent Y"];
lottie.assets[2].layers[0].shapes[0].ks.k.v[2][1] = data["Point 2 Out Tangent Y"];
</script>
{editor_example:bezier}
33 changes: 0 additions & 33 deletions docs/playground/json_editor.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,17 +112,8 @@ body.wide .container {
border-top-color: #555;
}

.gradient-editor input
{
vertical-align: middle;
margin: 1ex;
height: 48px;
}
#info_box input[type="color"]
{
padding: 0;
width: 96px;
height: 48px;
margin-top: 1ex;
}

Expand All @@ -146,30 +137,6 @@ body.wide .container {
display: block;
}

.keyframe-preview-container {
display: flex;
flex-flow: column;
}

.keyframe-preview-container canvas {
border: 1px solid #ccc;
}

.keyframe-preview {
width: 24px;
height: 24px;
border-radius: 12px;
position: relative;
background-color: black;
animation: keyframe-preview 3s infinite;
}

@keyframes keyframe-preview {
0% {left: 0px;}
50% {left: 176px;}
100% {left: 0px;}
}

#lottie_target {
max-height: 512px;
}
Expand Down
Loading

0 comments on commit 76668b2

Please sign in to comment.