Skip to content

Commit a6380b3

Browse files
mbasagliambasaglia
authored
Fix some examples not showing
2 parents 35485e5 + d4f8c82 commit a6380b3

File tree

8 files changed

+73
-183
lines changed

8 files changed

+73
-183
lines changed

‎docs/assets.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ You can find more details in the [Precompositions](breakdown/precomps.md) page.
8181

8282
Follows a rather extreme example, that uses precompositions inside precompositions to generate a fractal:
8383

84-
{lottie:fractal.json:512:512}
84+
{lottie src="static/examples/fractal.json"}
8585

8686

8787
### Data Source

‎docs/breakdown/bezier.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Bezier Curves
22

3-
{lottie:bezier_expression.json:512:512}
3+
{lottie src="static/examples/bezier_expression.json"}
44

55

66
## Introduction to Beziers

‎docs/breakdown/bouncy_ball.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This page will show the basics of Lottie by inspecting this simple animation:
44

5-
{lottie:bouncy_ball.json:512:512}
5+
{lottie src="static/examples/bouncy_ball.json"}
66

77
Note that Lottie files usually have their JSON minified, but the example files
88
here have been expanded for ease of inspection.
@@ -144,7 +144,7 @@ The animated properties of a transform are as follows:
144144

145145
`p` is the position (translation). Both `a` and `p` have arrays as values representing 2D coordinates.
146146

147-
`s` is the scale and, similar to `a` and `p`, its value has 2 components.
147+
`s` is the scale and, similar to `a` and `p`, its value has 2 components.
148148
Note that values are expressed as percentages (`100` meaning 100% or no scaling).
149149

150150
`r` is the rotation angle in degrees.

‎docs/breakdown/precomps.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ Follows a simple example:
2929

3030
First we start with a file without precomps:
3131

32-
{lottie:precomp/star-nocomp.json:512:512}
32+
{lottie src="static/examples/precomp/star-nocomp.json"}
3333

3434
And the same animation but using a precomp:
3535

36-
{lottie:precomp/star-comp.json:512:512}
36+
{lottie src="static/examples/precomp/star-comp.json"}
3737

3838
Now let's have a look at how the JSON changed:
3939

@@ -233,7 +233,7 @@ layers showing the same precomp.
233233
In the following example the star is animated once but there are 8
234234
precomp layers with different rotations:
235235

236-
{lottie:precomp/star-splosion.json:512:512}
236+
{lottie src="static/examples/precomp/star-splosion.json"}
237237

238238
### Overlaying Animations
239239

@@ -248,10 +248,10 @@ In the following example we will overlay the animation from the last
248248
example with a different animation.
249249

250250
First Animation:
251-
{lottie:precomp/star-splosion.json:512:512}
251+
{lottie src="static/examples/precomp/star-splosion.json"}
252252

253253
Second Animation:
254-
{lottie:precomp/circle.json:512:512}
254+
{lottie src="static/examples/precomp/circle.json"}
255255

256256
Overlaid:
257257

‎docs/effects.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Effect types:
1616

1717
All the examples will use this as their base:
1818

19-
{lottie:image.json:512:512}
19+
{lottie src="static/examples/image.json"}
2020

2121

2222
### Fill Effect

‎docs/layers.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ In the following example, the star and the ellipse are in separate layers,
4545
but both have the same parent, which moves left and right.
4646
Between the two there's an additional layer with the rectangle.
4747

48-
{lottie:parenting.json:512:512}
48+
{lottie src="static/examples/parenting.json"}
4949

5050
### Auto Orient
5151

@@ -58,7 +58,7 @@ with no rotation when the position moves towards the right.
5858
The transparent one keeps its rotation the same (`ao` is 0), while the solid one
5959
follows the path (`ao` is 1).
6060

61-
{lottie:auto_orient.json:512:512}
61+
{lottie src="static/examples/auto_orient.json"}
6262

6363
### Mattes
6464

@@ -135,7 +135,7 @@ So if you have for example: `[Ellipse, Rectangle]`
135135

136136
The ellipse will show on top of the rectangle:
137137

138-
{lottie:layer_order.json:512:512}
138+
{lottie src="static/examples/layer_order.json"}
139139

140140
This means the render order goes from the last element to the first.
141141

‎docs/static/examples/auto_orient.json‎

Lines changed: 57 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"v": "5.5.7",
33
"ip": 0,
4-
"op": 180,
4+
"op": 120,
55
"nm": "Animation",
66
"mn": "{46da3bdd-424c-4d87-ab48-70568860494c}",
77
"fr": 60,
8-
"w": 512,
9-
"h": 512,
8+
"w": 500,
9+
"h": 400,
1010
"assets": [
1111
{
1212
"nm": "PolyStar",
@@ -137,95 +137,40 @@
137137
"a": 1,
138138
"k": [
139139
{
140+
"s": [200, 100],
140141
"t": 0,
141-
"s": [
142-
125.50000000000003,
143-
105.70000000000003
144-
],
145-
"h": 0,
146-
"o": {
147-
"x": [
148-
0
149-
],
150-
"y": [
151-
0
152-
]
153-
},
154-
"i": {
155-
"x": [
156-
1
157-
],
158-
"y": [
159-
1
160-
]
161-
},
162-
"e": [
163-
408.489552238806,
164-
110.89850746268658
165-
]
142+
"to": [50, 0],
143+
"ti": [0, -50],
144+
"o": {"x": 0, "y": 0},
145+
"i": {"x": 1, "y": 1}
166146
},
167147
{
168-
"t": 50,
169-
"s": [
170-
408.489552238806,
171-
110.89850746268658
172-
],
173-
"h": 0,
174-
"o": {
175-
"x": [
176-
0
177-
],
178-
"y": [
179-
0
180-
]
181-
},
182-
"i": {
183-
"x": [
184-
1
185-
],
186-
"y": [
187-
1
188-
]
189-
},
190-
"e": [
191-
107.85597014925375,
192-
410.49876865671655
193-
]
148+
"s": [300, 200],
149+
"t": 30,
150+
"to": [0, 50],
151+
"ti": [50, 0],
152+
"o": {"x": 0, "y": 0},
153+
"i": {"x": 1, "y": 1}
194154
},
195155
{
196-
"t": 130,
197-
"s": [
198-
107.85597014925375,
199-
410.49876865671655
200-
],
201-
"h": 0,
202-
"o": {
203-
"x": [
204-
0
205-
],
206-
"y": [
207-
0
208-
]
209-
},
210-
"i": {
211-
"x": [
212-
1
213-
],
214-
"y": [
215-
1
216-
]
217-
},
218-
"e": [
219-
125.50000000000003,
220-
105.70000000000003
221-
]
156+
"s": [200, 300],
157+
"t": 60,
158+
"to": [-50, 0],
159+
"ti": [0, 50],
160+
"o": {"x": 0, "y": 0},
161+
"i": {"x": 1, "y": 1}
222162
},
223163
{
224-
"t": 180,
225-
"s": [
226-
125.50000000000003,
227-
105.70000000000003
228-
]
164+
"s": [100, 200],
165+
"t": 90,
166+
"to": [0, -50],
167+
"ti": [-50, 0],
168+
"o": {"x": 0, "y": 0},
169+
"i": {"x": 1, "y": 1}
170+
},
171+
{
172+
"s": [200, 100],
173+
"t": 120
229174
}
230175
]
231176
},
@@ -271,95 +216,40 @@
271216
"a": 1,
272217
"k": [
273218
{
219+
"s": [200, 100],
274220
"t": 0,
275-
"s": [
276-
125.50000000000003,
277-
105.70000000000003
278-
],
279-
"h": 0,
280-
"o": {
281-
"x": [
282-
0
283-
],
284-
"y": [
285-
0
286-
]
287-
},
288-
"i": {
289-
"x": [
290-
1
291-
],
292-
"y": [
293-
1
294-
]
295-
},
296-
"e": [
297-
408.489552238806,
298-
110.89850746268658
299-
]
221+
"to": [50, 0],
222+
"ti": [0, -50],
223+
"o": {"x": 0, "y": 0},
224+
"i": {"x": 1, "y": 1}
300225
},
301226
{
302-
"t": 50,
303-
"s": [
304-
408.489552238806,
305-
110.89850746268658
306-
],
307-
"h": 0,
308-
"o": {
309-
"x": [
310-
0
311-
],
312-
"y": [
313-
0
314-
]
315-
},
316-
"i": {
317-
"x": [
318-
1
319-
],
320-
"y": [
321-
1
322-
]
323-
},
324-
"e": [
325-
107.85597014925375,
326-
410.49876865671655
327-
]
227+
"s": [300, 200],
228+
"t": 30,
229+
"to": [0, 50],
230+
"ti": [50, 0],
231+
"o": {"x": 0, "y": 0},
232+
"i": {"x": 1, "y": 1}
328233
},
329234
{
330-
"t": 130,
331-
"s": [
332-
107.85597014925375,
333-
410.49876865671655
334-
],
335-
"h": 0,
336-
"o": {
337-
"x": [
338-
0
339-
],
340-
"y": [
341-
0
342-
]
343-
},
344-
"i": {
345-
"x": [
346-
1
347-
],
348-
"y": [
349-
1
350-
]
351-
},
352-
"e": [
353-
125.50000000000003,
354-
105.70000000000003
355-
]
235+
"s": [200, 300],
236+
"t": 60,
237+
"to": [-50, 0],
238+
"ti": [0, 50],
239+
"o": {"x": 0, "y": 0},
240+
"i": {"x": 1, "y": 1}
356241
},
357242
{
358-
"t": 180,
359-
"s": [
360-
125.50000000000003,
361-
105.70000000000003
362-
]
243+
"s": [100, 200],
244+
"t": 90,
245+
"to": [0, -50],
246+
"ti": [-50, 0],
247+
"o": {"x": 0, "y": 0},
248+
"i": {"x": 1, "y": 1}
249+
},
250+
{
251+
"s": [200, 100],
252+
"t": 120
363253
}
364254
]
365255
},

‎docs/text.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ Here we use `origin` 0 (and we can omit it).
5050

5151
</td><td markdown="block">
5252

53-
{lottie:font-local.json:300:100}
53+
{lottie src="static/examples/font-local.json" buttons="false" background="white"}
5454

5555
</td></tr>
5656
<tr><th>CSS</th><th>Output</th></tr>
@@ -88,7 +88,7 @@ Here we use `origin` 1.
8888

8989
</td><td markdown="block">
9090

91-
{lottie:font-css.json:300:100}
91+
{lottie src="static/examples/font-css.json" buttons="false" background="white"}
9292

9393
</td></tr>
9494
<tr><th>CSS</th><th>Output</th></tr>
@@ -130,7 +130,7 @@ Here we use `origin` 3.
130130

131131
</td><td markdown="block">
132132

133-
{lottie:font-url.json:300:100}
133+
{lottie src="static/examples/font-url.json" buttons="false" background="white"}
134134

135135
</td></tr>
136136
<tr><th>CSS</th><th>Output</th></tr>

0 commit comments

Comments
 (0)