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.

Demo gif

Install

Install slideshow component using NPM.

npm i --save vue-displacement-slideshow



Template

Create sample template

<template>
    <vue-displacement-slideshow 
            :images="images"
            displacement="require('../assets/displacement.png')"
            :intensity.number="0.2"
            :speedIn.number="1.4"
            :speedOut.number="1.4"
            ease="Expo.easeInOut"
            ref="slideshow"></vue-displacement-slideshow>
</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.

DEMO | DOWNLOAD

This awesome plugin is developed by AlbanCrepel. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.