diff --git a/docs/components/content/ScaleExample.vue b/docs/components/content/ScaleExample.vue
new file mode 100644
index 00000000..9c369d51
--- /dev/null
+++ b/docs/components/content/ScaleExample.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
diff --git a/docs/content/1.introduction/1.installation.md b/docs/content/1.introduction/1.installation.md
index a2d820bc..b5e31d5b 100644
--- a/docs/content/1.introduction/1.installation.md
+++ b/docs/content/1.introduction/1.installation.md
@@ -29,7 +29,7 @@ pnpm add vue3-lottie@latest
::
::alert{type="warning"}
-If you upgrading from v2 to v3, please remove the `dist/style.css` import from your project. This css is now imported automatically by the plugin. For more information, see [Migrating from v2 to v3](/introduction/v3).
+If you are upgrading from v2 to v3, please remove the `dist/style.css` import from your project. This css is now imported automatically by the plugin. For more information, see [Migrating from v2 to v3](/introduction/v3).
::
::alert{type="success"}
diff --git a/docs/content/1.introduction/2.vue-3.md b/docs/content/1.introduction/2.vue-3.md
index 9207d3fa..f2bf3244 100644
--- a/docs/content/1.introduction/2.vue-3.md
+++ b/docs/content/1.introduction/2.vue-3.md
@@ -1,7 +1,7 @@
# Usage with Vue 3
::alert{type="warning"}
-If you upgrading from v2 to v3, please remove the `dist/style.css` import from your main.js or main.ts file. This css is now imported automatically by the plugin.
+If you are upgrading from v2 to v3, please remove the `dist/style.css` import from your main.js or main.ts file. This css is now imported automatically by the plugin.
::
## Register the component
diff --git a/docs/content/2.api/1.props.md b/docs/content/2.api/1.props.md
index 5e8a2952..51cc759c 100644
--- a/docs/content/2.api/1.props.md
+++ b/docs/content/2.api/1.props.md
@@ -148,6 +148,33 @@ A prop to change the background color of the container. This will be passed dire
| ------ | ------------- | -------- | ------------------------------------------ |
| String | `transparent` | no | Any valid CSS color or hex based rgb value |
+## `noMargin` :badge[New]{type="success"}
+
+Currently the lottie animation has a auto margin applied to it to center it in the container. This prop will remove that margin. This is useful if you want better control over the positioning of the animation without needing to override the margin via css.
+
+| Type | Default value | Required | Accepted values |
+| ------- | ------------- | -------- | ----------------- |
+| Boolean | `false` | no | `true` or `false` |
+
+## `scale` :badge[New]{type="success"}
+
+Have you ever found a lottie animation that is perfect for your project but it is too big or too small? Now you can use the `scale` prop to scale the animation to the ratio that you want.
+
+| Type | Default value | Required | Accepted values |
+| ------ | ------------- | -------- | --------------- |
+| Number | `1` | no | `Number > 0` |
+
+[scaling demo](/examples#using-the-scale-prop)
+
+:::alert{type="info"}
+This prop will do the scale from the center of the animation.
+This prop will also ONLY scale the svg inside the container. It will not scale the container itself. You should use the `width` and `height` props to change the size of the container.
+:::
+
+:::alert{type="warning"}
+There is a chance that the animation could be blurry with this prop due to a downstream process for how the lottie animation is rendered. Verify that the animation looks okay when using this prop. For most animations this should not be an issue since they are vector based.
+:::
+
## `assetsPath`
Use this prop if your lottie animation needs to load assets from a different path. This is useful if you are using a CDN to host your assets. Refer to the [examples section](/examples#using-a-custom-assets-path) for a demo on how to use this prop.
diff --git a/docs/content/3.examples.md b/docs/content/3.examples.md
index 3d5fefd9..0df505c2 100644
--- a/docs/content/3.examples.md
+++ b/docs/content/3.examples.md
@@ -1,3 +1,4 @@
+
# Examples
Some examples of how to use the library are shown below.
@@ -121,6 +122,39 @@ You can set the `direction` to `alternate` to reverse the animation at the end o
::
::
+## Using the `scale` prop
+
+If you have an animation that is too big or too small, you can use the `scale` prop to scale the animation. This is only on the internal canvas and does not affect the size of the container.
+
+::code-group
+ ::code-block{label="Preview" preview}
+ ::scale-example
+ ::
+ ::
+ ::code-block{label="Code"}
+ ```vue
+
+
+
+
+
+ ```
+ ::
+::
## Using the `pauseOnHover` prop
diff --git a/docs/package.json b/docs/package.json
index cfd9d1b0..b655f806 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -19,6 +19,6 @@
"nuxt": "^3.5.3"
},
"dependencies": {
- "vue3-lottie": "3.0.0"
+ "vue3-lottie": "3.1.0-beta.0"
}
}
diff --git a/docs/yarn.lock b/docs/yarn.lock
index db80199f..d6f46963 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -8360,10 +8360,10 @@ vue-template-compiler@^2.7.14:
de-indent "^1.0.2"
he "^1.2.0"
-vue3-lottie@3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/vue3-lottie/-/vue3-lottie-3.0.0.tgz#371c2187481c493ed145f385d9ba6477ea0e3836"
- integrity sha512-1HZhpKyqlj5jOwO2JTERJOXuJBYqnz/wnkeHjAmn7yI95ize62XQImP226/0G3+c5T3Oj//vIwyMJ2Zhsd8fwg==
+vue3-lottie@3.1.0-beta.0:
+ version "3.1.0-beta.0"
+ resolved "https://registry.yarnpkg.com/vue3-lottie/-/vue3-lottie-3.1.0-beta.0.tgz#6cab4ae0471be02ea88d414ab59ae77d26b23ff5"
+ integrity sha512-wgtLV0K8RpjM19Xx6VDUQB1M7i2peJio/7b5j9Px346A39mqCG8kfp+4tdA5MIPWqUDdvNUyK+QjtyG1elitvA==
dependencies:
lodash-es "^4.17.21"
lottie-web "5.12.2"