Today I am going to share simple Vue.js 2.0 slideshow component working with Three.js .Webgl image displacement transitions made simple. A Vue.js 2.0 slideshow component working with Three.js and GSAP.
Install
Install slideshow component using NPM.
npm i --save vue-displacement-slideshow |
Template
Create sample template
>
|
JS
Call the plugin and Vue.js 2.0 slideshow component working.
<script> import VueDisplacementSlideshow from "vue-displacement-slideshow"; export default { components: { VueDisplacementSlideshow, }, computed: { images() { return [ require("../assets/images/1.jpg"), require("../assets/images/2.jpg"), require("../assets/images/3.jpg") ]; } }, methods: { init() { //We loop through all our images by calling the 'next' method of our component every 2 seconds setInterval(() => { this.$refs.slideshow.next(); }, 2000); } }, mounted() { this.init(); } }; script> |
You can use following properties to customize the plugin.
| name | type | description | required | default value |
|---|---|---|---|---|
| images | Array | An array containing the paths of the images you wan to use | true | [] |
| displacement | String | The path of the displacement image | true | none |
| intensity | Number | The intensity of the displacement | false | 1 |
| speedIn | Number | The duration of the animation for the next image, in seconds | false | 1 |
| speedOut | Number | The duration of the animation for the previous image, in seconds | false | 1 |
| ease | String | The GSAP easing to use | false | Expo.easeOut |
See live demo and download source code.
This awesome plugin is developed by AlbanCrepel. Visit their official github repository for more information and follow for future updates.
