vue3-lottie - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "vue3-lottie",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Sanjay Soundarajan <[e-mail]> (https://sanjaysoundarajan.dev)",

README.md

@@ -5,3 +5,3 @@ # Vue 3 Lottie
 
-After finding a suprising lack of Vue 3 components for Lottie animations, I decided to create my own.
+`vue3-lottie` was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie animations to my Vue application I found a suprising lack of maintained solutions. `vue3-lottie` is a vue wrapper around the `lottie-web` library with a few additional features.
 
@@ -76,17 +76,21 @@ # Demos
 
+More detailed explanations are provided in the documentation.
+
 | Prop             | Type                  | Default Value | Description                                                                              |
 | ---------------- | --------------------- | ------------- | ---------------------------------------------------------------------------------------- |
 | animationData    | Object (**Required**) | none          | The lottie animation data                                                                |
-| autoPlay         | Boolean               | true          | Start animation on component load                                                        |
-| rendererSettings | Object                | {}            | Options for if you want to use an existing canvas to draw (can be ignored on most cases) |
-| loop             | Number or Boolean     | true          | The number of instances that the lottie animation should run (true is infinite)          |
 | width            | Number or String      | "100%"        | Width of the lottie animation container (Numbers correspond to pixel values)             |
 | height           | Number or String      | "100%"        | Height of the lottie animation container (Numbers correspond to pixel values)            |
+| loop             | Number or Boolean     | true          | The number of instances that the lottie animation should run (true is infinite)          |
+| autoPlay         | Boolean               | true          | Start animation on component load                                                        |
+| pauseAnimation   | Boolean               | false         | Prop to pass reactive variables so that you can control animation pause and play         |
+| pauseOnHover     | Boolean               | false         | Whether to pause the animation on hover                                                  |
+| playOnHover      | Boolean               | false         | Whether to play the animation when you hover                                             |
 | backgroundColor  | String                | transparent   | Background color of the container                                                        |
-| pauseOnHover     | Boolean               | false         | Whether to pause the animation on hover                                                  |
-| pauseOnClick     | Boolean               | false         | Whether to play the animation when you hover                                             |
-| pauseAnimation   | Boolean               | false         | Prop to pass reactive variables so that you can control animation pause and play         |
+| rendererSettings | Object                | {}            | Options for if you want to use an existing canvas to draw (can be ignored on most cases) |
 
 # Events
 
+A few events are emitted from the component. Look at the [Demos](#Demos) for examples.
+
 - onComplete
@@ -101,2 +105,13 @@ - If your animation has a finite amount of loops you can use this event to know when the animation has completed.
 
+# Methods
+
+You can control the animation with the following methods. These methods can be called by assigning a `ref` value to the `vue3-lottie` component. Look at the [Demos](#Demos) for examples.
+
+- play
+  - Plays the animation
+- pause
+  - Pauses the animation
+- stop
+  - Stops the animation. This will also reset the animation to the first frame. Look at the demo for some examples.
+
 ![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg) ![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1389900

increased by0.06%

Number of lines in readme file

115

increased by15%

No dependency changes