Vue.js 2.0 slideshow component working with Three.js
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.
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.
DEMO | DOWNLOAD
This awesome plugin is developed by AlbanCrepel. Visit their official github repository for more information and follow for future updates.
