rubberhose-lottie

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

Usage no npm install needed!

<script type="module">
  import rubberhoseLottie from 'https://cdn.skypack.dev/rubberhose-lottie';
</script>

README

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>