Fix embedded lotties

Author: mbasaglia

docs/assets.md

@@ -81,7 +81,7 @@ You can find more details in the [Precompositions](breakdown/precomps.md) page.
 
 Follows a rather extreme example, that uses precompositions inside precompositions to generate a fractal:
 
-{lottie:fractal.json:512:512}
+{lottie src="static/examples/fractal.json"}
 
 
 ### Data Source

docs/breakdown/bezier.md

@@ -1,6 +1,6 @@
 # Bezier Curves
 
-{lottie:bezier_expression.json:512:512}
+{lottie src="static/examples/bezier_expression.json"}
 
 
 ## Introduction to Beziers

docs/breakdown/bouncy_ball.md

@@ -2,7 +2,7 @@
 
 This page will show the basics of Lottie by inspecting this simple animation:
 
-{lottie:bouncy_ball.json:512:512}
+{lottie src="static/examples/bouncy_ball.json"}
 
 Note that Lottie files usually have their JSON minified, but the example files
 here have been expanded for ease of inspection.
@@ -144,7 +144,7 @@ The animated properties of a transform are as follows:
 
 `p` is the position (translation). Both `a` and `p` have arrays as values representing 2D coordinates.
 
-`s` is the scale and, similar to `a` and `p`, its value has 2 components. 
+`s` is the scale and, similar to `a` and `p`, its value has 2 components.
 Note that values are expressed as percentages (`100` meaning 100% or no scaling).
 
 `r` is the rotation angle in degrees.

docs/breakdown/precomps.md

@@ -29,11 +29,11 @@ Follows a simple example:
 
 First we start with a file without precomps:
 
-{lottie:precomp/star-nocomp.json:512:512}
+{lottie src="static/examples/precomp/star-nocomp.json"}
 
 And the same animation but using a precomp:
 
-{lottie:precomp/star-comp.json:512:512}
+{lottie src="static/examples/precomp/star-comp.json"}
 
 Now let's have a look at how the JSON changed:
 
@@ -233,7 +233,7 @@ layers showing the same precomp.
 In the following example the star is animated once but there are 8
 precomp layers with different rotations:
 
-{lottie:precomp/star-splosion.json:512:512}
+{lottie src="static/examples/precomp/star-splosion.json"}
 
 ### Overlaying Animations
 
@@ -248,10 +248,10 @@ In the following example we will overlay the animation from the last
 example with a different animation.
 
 First Animation:
-{lottie:precomp/star-splosion.json:512:512}
+{lottie src="static/examples/precomp/star-splosion.json"}
 
 Second Animation:
-{lottie:precomp/circle.json:512:512}
+{lottie src="static/examples/precomp/circle.json"}
 
 Overlaid:
 

docs/effects.md

@@ -16,7 +16,7 @@ Effect types:
 
 All the examples will use this as their base:
 
-{lottie:image.json:512:512}
+{lottie src="static/examples/image.json"}
 
 
 ### Fill Effect

docs/layers.md

@@ -45,7 +45,7 @@ In the following example, the star and the ellipse are in separate layers,
 but both have the same parent, which moves left and right.
 Between the two there's an additional layer with the rectangle.
 
-{lottie:parenting.json:512:512}
+{lottie src="static/examples/parenting.json"}
 
 ### Auto Orient
 
@@ -58,7 +58,7 @@ with no rotation when the position moves towards the right.
 The transparent one keeps its rotation the same (`ao` is 0), while the solid one
 follows the path (`ao` is 1).
 
-{lottie:auto_orient.json:512:512}
+{lottie src="static/examples/auto_orient.json"}
 
 ### Mattes
 
@@ -135,7 +135,7 @@ So if you have for example: `[Ellipse, Rectangle]`
 
 The ellipse will show on top of the rectangle:
 
-{lottie:layer_order.json:512:512}
+{lottie src="static/examples/layer_order.json"}
 
 This means the render order goes from the last element to the first.
 

docs/text.md

@@ -50,7 +50,7 @@ Here we use `origin` 0 (and we can omit it).
 
 </td><td markdown="block">
 
-{lottie:font-local.json:300:100}
+{lottie src="static/examples/font-local.json" buttons="false" background="white"}
 
 </td></tr>
 <tr><th>CSS</th><th>Output</th></tr>
@@ -88,7 +88,7 @@ Here we use `origin` 1.
 
 </td><td markdown="block">
 
-{lottie:font-css.json:300:100}
+{lottie src="static/examples/font-css.json" buttons="false" background="white"}
 
 </td></tr>
 <tr><th>CSS</th><th>Output</th></tr>
@@ -130,7 +130,7 @@ Here we use `origin` 3.
 
 </td><td markdown="block">
 
-{lottie:font-url.json:300:100}
+{lottie src="static/examples/font-url.json" buttons="false" background="white"}
 
 </td></tr>
 <tr><th>CSS</th><th>Output</th></tr>