Negatively Proportional Model

    @lottiefiles/vue-lottie-player

    1.0.1 • Public • Published

    LottiePlayer Vue Component

    This is a Vue component for the Lottie Web Player. This library is a vue wrapper around the LottieFiles Lottie Web Player

    screencast

    In Javascript or TypeScript:

    1. Install package using npm or yarn.
    npm install --save @lottiefiles/vue-lottie-player
    1. Import package in your code.
    import LottieVuePlayer from "@lottiefiles/vue-lottie-player";
    1. Add the player as a plugin to Vue
    Vue.use(LottieVuePlayer);

    Example/Development

    1. Clone repo

    2. run yarn install

    Usage

    Player component

    Add the element lottie-vue-player and set the src prop to a URL pointing to a valid Lottie JSON. Full example of an App.vue file is shown below.

    <template>
        <div id="app">
            <lottie-vue-player :src="`https://assets10.lottiefiles.com/packages/lf20_tzjfwgud.json`"
                               :theme="options.theme"
                               :player-size="options.playerSize"
                               :player-controls="true"
                               style="width: 100%; height:400px">
            </lottie-vue-player>
        </div>
    </template>
    
    <script>
    
        export default {
            name: 'App',
            data() {
                return {
                    options: {
                        minimizable: false,
                        playerSize: "standard",
                        backgroundColor: '#fff',
                        backgroundStyle: 'color',
                        theme: {
                            controlsView: "standard",
                            active: "light",
                            light: {
                                color: '#3D4852',
                                backgroundColor: '#fff',
                                opacity: '0.7',
                            },
                            dark: {
                                color: '#fff',
                                backgroundColor: '#202020',
                                opacity: '0.7',
                            }
                        }
                    }
                }
            }
        }
    </script>
    

    Props

    Prop Description Type Default
    autoplay Autoplay animation on load. boolean false
    backgroundColor Background color. string undefined
    playerControls Show controls. boolean false
    showColorPicker Show color picker boolean false
    playerSize Player set size (hide, minimal, standard) string standard
    loop Whether to loop animation. boolean false
    speed Animation speed. number 1
    style The style for the container. object undefined
    src (required) Bodymovin JSON data or URL to JSON. object string

    Methods

    togglePlayPause() => void

    Toggle animation play pause.

    Returns

    Type: void

    toggleFullscreen() => void

    Toggle full screen player.

    Returns

    Type: void

    toggleLoop() => void

    Toggle animation loop.

    Returns

    Type: void

    setPlayerSpeed(speed?: number) => void

    Sets animation play speed.

    Parameters

    Name Type Description
    value number Playback speed.

    Returns

    Type: void

    stop() => void

    Stops animation play.

    Returns

    Type: void

    setBackgroundColor(color: string) => void

    set background color.

    Returns

    Type: void

    License

    MIT License © LottieFiles.com

    Install

    npm i @lottiefiles/vue-lottie-player

    DownloadsWeekly Downloads

    304

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    2.9 MB

    Total Files

    9

    Last publish

    Collaborators

    • shaafiee
    • sam-osb
    • jawish
    • karamalie