1.1.3 • Published 4 years ago

rubberhose-lottie v1.1.3

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

rubberhose-lottie

DemoInstallationUsageAPIExamples

Vue component to easily make any Lottie file with Rubberhose fully interactive:

npm.io

Installation

npm i rubberhose-lottie

Usage

<!-- Inside a .vue file -->
<template>
  <Rubberhose :animation-data="myAnimationFile" />
</template>

<script>
export default {
  components: {
    Rubberhose: require("rubberhose-lottie").default,
  },
  data: () => ({
    myAnimationFile: require("@/assets/someLottieFile.json"),
  })
}
</template>

API

Props

PropertyTypeDefaultDescription
animation-dataObjectnullThe parsed Lottie JSON file to use
controllersArraynullArray of slider controls to control reactively
draggableArraynullArray of layers which should be draggable
clickableArraynullArray of layers which should be clickable
lockedArraynullArray of layer names which should have no user interaction

Events

None so far, but will be wanting to add soon

EventValueDescription
@

Examples

Check out this demo site for live examples.

The controllers prop is an array expecting a layer, name (of Slider Expression Control on layer), and value (numeric):

<template>
  <Rubberhose :animation-data="animationData" :controllers="controllerArray" />
  <Grid style="width: fit-content" column>
    <Input-Scroll
      label="Hose Length"
      v-model="controllers.length.value"
      :step="20"
      :min="1"
    />
  </Grid>
</template>

<script>
  export default {
    data: () => ({
      controllers: {
        length: {
          layer: "control",
          name: "hoseLength",
          value: 700,
        },
    }),
    components: {
      Rubberhose: require("rubberhose-lottie").default,
    },
    computed: {
      // The prop expects an Array, but I'd prefer to keep them as Objects
      // in data above. So we just convert the parent data objects to an Array:
      controllerArray() {
        let temp = [];
        Object.keys(this.controllers).forEach((key) => {
          temp.push(this.controllers[key]);
        });
        return temp;
      },
      // Without converting it like above, the component expects input similar to this:
      actualControllerData() {
        return [
          {
            layer: "Hose 1::Hips", // Name of the layer containing Slider control
            name: "Bend Direction", // Name of the Slider Expression control
            value: 100, // Value of the Slider
          }
        ]
      }
    }
  }
</script>
1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago