Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

A Vue.js slideshow component working with Three.js and GSAP

Posted on December 4, 2021December 4, 2021 By christo No Comments on A Vue.js slideshow component working with Three.js and GSAP

Complete implementation of a Vue.js slideshow component working with Three.js and GSAP

Webgl image displacement transitions made simple. A Vue.js slideshow component working with Three.js and GSAP. It works with Vue3 and older versions (until 3.0.1) work with Vue2

Table of Contents

  • vue-displacement-slideshow
    • Installation
    • Example
    • Props
    • Methods
    • Events emitted
    • Behavior

vue-displacement-slideshow

Webgl image displacement transitions made simple. A Vue.js slideshow component working with Three.js and GSAP. It works with Vue3 and older versions (until 3.0.1) work with Vue2.

The canvas can be interactive as well by setting the isInteractive props to true. See the props section to find more.

Installation

# using yarn
yarn add vue-displacement-slideshow
# or using npm
npm i vue-displacement-slideshow

⚠️ If you are using this component with Vue2, you have to use this version: 3.0.1, as the ones that follow only support Vue3. You can install a particular version like this:

# using yarn
yarn add vue-displacement-slideshow@3.0.1
# or using npm
npm i vue-displacement-slideshow@3.0.1

Example

<template>
    <vue-displacement-slideshow
            :images="images"
            displacement="require('../assets/displacement.png')"
            :intensity="0.2"
            :speedIn="1.4"
            :speedOut="1.4"
            ease="expo.out"
            ref="slideshow" />
</template>

<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>

With Nuxt :

Just wrap the component in a client-only component like so :

<client-only>
    <vue-displacement-slideshow />
</client-only>

This component is heavily based on this library : https://github.com/robin-dela/hover-effect

Props

nametypedescriptionrequireddefault value
imagesArrayAn array containing the paths of the images you wan to usetrue[]
displacementStringThe path of the displacement imagetrue
intensityNumberThe intensity of the displacementfalse1
speedInNumberThe duration of the animation for the next image, in secondsfalse1
speedOutNumberThe duration of the animation for the previous image, in secondsfalse1
easeStringThe GSAP easing to usefalseexpo.inOut
preserveAspectRatioBooleanWhether the images keep their aspect ratio (act as background-size : cover (true) or contain (false)falsetrue
isInteractiveBooleanWhether the canvas is interactive on mouse movefalsefalse
interactionFactorNumberThe factor of the interactionfalse1
interactionDurationNumberThe duration of the interactionfalse1
startAsTransparentBooleanWhether the canvas is initially transparent and the first transition goes to the first picturefalsefalse
angleNumberThe angle of the transitionfalseMath.PI / 4

Methods

NameDescriptionParamsReturns
nextTransition to the second image.void
previousTransition to the first image.void
pausePause the current transitionvoid
playPlay the current paused animationvoid
insertImage(path,index)Insert an image at a given indexpath : the path of the image index : the index of the inserted image, if not provided, the image will be inserted at the end of the array. It has the same behavior as the splice method (negative number allowed)a Promise resolved when the image is loaded
insertTransparentTexture(index)Insert a transparent texture at a given indexindex : the index of the inserted image, it has the same behavior as the insertImage index parametervoid
removeImage(index)Remove an image at a given indexindex : the index of the image to remove (must be different from the current image index)void
goTo(index)Transition to a given image by its indexindex : the index of the image to transition tovoid

Events emitted

NameDescription
loadedFired when the component is ready
animationEndFired when the transition is done.

Behavior

The first image of the array is displayed at first. When we call the next method while currently showing the last image, it will go to the first image. When we call the previous method while currently showing the first image, it will go to the last image.

The images are displayed as we would use background-size:cover in CSS.

If you set the prop startAsTransparent to true, then it adds a texture to your images array. If you want to remove it after, you can just call the removeImage method with 0 as the index parameter value.

Demo
Full Project
vue.js Tags:slideshow component, vue.js

Post navigation

Previous Post: Vue component for social sharing
Next Post: A simple hands-on mobile nested menu UI component with a smooth slide animation

Related Posts

Circular Progressbar using Vue.js vue.js
A simple and flexible implementation of toast style notifications using Vue.js vue.js
flip countdown timer component using Vue.js vue.js
Responsive Video Background Player using Vue.js vue.js
Vue component for social sharing vue.js
Simple list picker component made with Vue.js vue.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech