Displacement Slideshow With Vue.js and D3.js

Install & Download:

# NPM
$ npm install vue-displacement-slideshow --save

Description:

A Vue.js 3/2 slideshow component that comes with WebGL image displacement transitions based on d3.js and GSAP.

How to use it:

1. Import and register the slideshow component.

import VueDisplacementSlideshow from "vue-displacement-slideshow";

export default {
  components: {
    VueDisplacementSlideshow,
  },
  // ...
};

2. Add the vue-displacement-slideshow component to the app.

<template>
  <vue-displacement-slideshow
    :images="images"
    displacement="require('displacement.png')"
    ease="expo.out"
    ref="slideshow" />
</template>

export default {
  components: {
    VueDisplacementSlideshow,
  },
  computed: {
    images() {
      return [
        require("../assets/images/1.jpg"),
        require("../assets/images/2.jpg"),
        require("../assets/images/3.jpg")
      ];
    }
  },
  methods: {
    init() {
      setInterval(() => {
        this.$refs.slideshow.next();
      }, 2000);
    }
  },
  mounted() {
    this.init();
  }
};

3. Available component props.

images: {
  required: true,
  type: Array,
  default: () => []
},
displacement: {
  required: true,
  type: String
},
intensity: {
  required: false,
  type: Number,
  default: 1
},
speedIn: {
  required: false,
  type: Number,
  default: 1
},
speedOut: {
  required: false,
  type: Number,
  default: 1
},
ease: {
  required: false,
  type: String,
  default: "expo.inOut"
},
preserveAspectRatio: {
  required: false,
  type: Boolean,
  default: true
},
isInteractive: {
  required: false,
  type: Boolean,
  default: false
},
interactionFactor: {
  required: false,
  type: Number,
  default: 1
},
interactionDuration: {
  required: false,
  type: Number,
  default: 1
},
angle: {
  required: false,
  type: Number,
  default: Math.PI / 4
},
startAsTransparent: {
  required: false,
  type: Boolean,
  default: false
}