Displacement Slideshow With Vue.js and D3.js

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
}

Preview:

Changelog:

v4.0.0 (11/20/2021)

• working with vue3 and using vite

v3.0.1 (03/03/2021)

• Remove requestAnimationFrame if is not interactive

v3.0.0 (07/31/2020)

• added insertTransparentTexture method and new way to interact

Download Details:

Author: AlbanCrepel

Live Demo: https://vue-displacement-slideshow.now.sh/#/

Download Link: https://github.com/AlbanCrepel/vue-displacement-slideshow/archive/master.zip

Official Website: https://github.com/AlbanCrepel/vue-displacement-slideshow

Install & Download:

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