Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fitzhavey/lottie-player-vue
LottieFiles animations, in Vue.js!
https://github.com/fitzhavey/lottie-player-vue
Last synced: about 1 month ago
JSON representation
LottieFiles animations, in Vue.js!
- Host: GitHub
- URL: https://github.com/fitzhavey/lottie-player-vue
- Owner: fitzhavey
- Created: 2020-02-26T00:18:27.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T08:19:58.000Z (almost 2 years ago)
- Last Synced: 2024-09-16T16:09:06.213Z (about 2 months ago)
- Language: Vue
- Homepage: http://lottiefiles.com/
- Size: 1.24 MB
- Stars: 24
- Watchers: 5
- Forks: 5
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lottie Player Vue
A vue wrapper for [@lottiefiles/lottie-player](https://www.npmjs.com/package/@lottiefiles/lottie-player). It makes it simple to include beautiful animations in your web apps using https://lottiefiles.com.
It is published on npm at: https://www.npmjs.com/package/lottie-player-vue
## Installation
Install [lottie-player-vue](https://www.npmjs.com/package/lottie-player-vue):
```bash
npm install --save lottie-player-vue
```
Include in it either globally (in `main.js`) or a Vue component.
_Global_:
```js
// main.js
// ...
import LottiePlayer from 'lottie-player-vue';
Vue.use(LottiePlayer);
// ...
```
_Component_:
```js
// MyComponent.vue
// ...
import LottiePlayer from 'lottie-player-vue';
export default {
components: {
LottiePlayer
},
// ...
```
And then add it to your template:
```html
```
## Properties
Customisation of the tree is configured with the following properties:
| Name | Default | Description |
|---------|--------------|------------------------------------------------------------------------------------------|
| src | **required** | JSON animation, from http://lottiefiles.com |
| options | `{}` | _documented below_ / https://www.npmjs.com/package/@lottiefiles/lottie-player#properties |
The options object matches the properties found in the [offical lottiefiles documentation](https://www.npmjs.com/package/@lottiefiles/lottie-player#properties) exactly with the addition that we also support the `width` and `height` keys. These will be mapped directly to the `width` and `height` properties of the animation HTML element.
e.g.
```js
// options
{
autoplay: true,
speed: 2.5,
width: '100px'
}
```