<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- <br /> -->
    <v-card class="d-inline-flex">
      <animation></animation>
    </v-card>
  </div>
</template>

<script>
import Animation from "../components/Animation";
// import Lottie from "vue-lottie";
import * as delivery from "@/assets/lottie/halloween.json";
export default {
  components: {
    animation: Animation
  },
  methods: {
    handleAnimation: function(anim) {
      this.anim = anim;
    },

    stop: function() {
      this.anim.stop();
    },

    play: function() {
      this.anim.play();
    },

    pause: function() {
      this.anim.pause();
    },

    onSpeedChange: function() {
      this.anim.setSpeed(this.animationSpeed);
    }
  },
  data() {
    return {
      defaultOptions: { animationData: delivery },
      animationSpeed: 1
    };
  }
};
</script>

<style lang="scss" scoped></style>
