rubberhose-lottie

| Demo | Installation | Usage | API | Examples | | --------------------------------------------------- | :---------------------------: | :-------------: | :---------: | :-------------------: |

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

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

| Property | Type | Default | Description | | :------------- | :----- | :------ | ---------------------------------------------------------: | | animation-data | Object | null | The parsed Lottie JSON file to use | | controllers | Array | null | Array of slider controls to control reactively | | draggable | Array | null | Array of layers which should be draggable | | clickable | Array | null | Array of layers which should be clickable | | locked | Array | null | Array of layer names which should have no user interaction |

Events

None so far, but will be wanting to add soon

| Event | Value | Description | | :---- | :---- | ----------: | | @ | | |

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>