Numerous Pulsating Martians

    lottie-player-vue

    0.0.16 • Public • Published

    Lottie Player Vue

    A vue wrapper for @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

    animation

    Installation

    Install lottie-player-vue:

    npm install --save lottie-player-vue

    Include in it either globally (in main.js) or a Vue component. Global:

    // main.js
    // ...
    import LottiePlayer from 'lottie-player-vue';
     
    Vue.use(LottiePlayer);
    // ...

    Component:

    // MyComponent.vue
    // ...
    import LottiePlayer from 'lottie-player-vue';
     
    export default {
        components: {
            LottiePlayer
        },
    // ...

    And then add it to your template:

    <div>
        <lottie-player :src="animationJSON"/>
    </div>

    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 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.

    // options
    {
        autoplay: true,
        speed: 2.5,
        width: '100px'
    }

    Install

    npm i lottie-player-vue

    DownloadsWeekly Downloads

    114

    Version

    0.0.16

    License

    ISC

    Unpacked Size

    3.01 MB

    Total Files

    14

    Last publish

    Collaborators

    • michaelfitzhavey