In the dynamic landscape of web development, creating visually stunning and immersive components is essential for engaging user experiences. In this detailed guide, we’ll explore the creation of a Vue.js slideshow component that leverages the power of Three.js for 3D graphics and GSAP for smooth animations. This combination allows developers to build a captivating slideshow that goes beyond traditional two-dimensional presentations.

Setting Up the Vue Project:

To begin, create a new Vue project using the Vue CLI. Ensure that Node.js and npm are installed on your machine. If not, download and install them from Node.js official website.

npm install -g @vue/cli
vue create vue-slideshow
cd vue-slideshow

Integrating Three.js and GSAP:

1. Install Three.js and GSAP:

npm install three gsap

2. Create a Slideshow.vue component:

<template>
  <div ref="slideshowContainer" class="slideshow-container"></div>
</template>

<script>
import * as THREE from 'three';
import { GSAP } from 'gsap';

export default {
  mounted() {
    this.initSlideshow();
  },
  methods: {
    initSlideshow() {
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.slideshowContainer.appendChild(renderer.domElement);

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      const animate = () => {
        requestAnimationFrame(animate);

        // Add your animation logic here

        renderer.render(scene, camera);
      };

      animate();
    },
  },
};
</script>

<style scoped>
.slideshow-container {
  width: 100%;
  height: 100vh;
}
</style>

Building the Slideshow Logic:

1. Initialize GSAP:

npm install gsap

2. Extend the Slideshow.vue component:

<script>
import * as THREE from 'three';
import { GSAP } from 'gsap';

export default {
  mounted() {
    this.initSlideshow();
  },
  methods: {
    initSlideshow() {
      // Existing code...

      // New GSAP logic
      const tl = GSAP.timeline();
      tl.to(cube.rotation, { duration: 1, y: Math.PI * 2, ease: 'power2.inOut' });

      const animate = () => {
        requestAnimationFrame(animate);

        // GSAP animation logic
        GSAP.updateRoot(time => {
          const elapsedTime = time / 1000; // Convert milliseconds to seconds
          tl.progress(elapsedTime);
        });

        renderer.render(scene, camera);
      };

      animate();
    },
  },
};
</script>

Expanding the Slideshow:

1. Load Images for Slides:

npm install vue-loader url-loader file-loader

2. Update Slideshow.vue component:

<template>
  <div ref="slideshowContainer" class="slideshow-container"></div>
</template>

<script>
import * as THREE from 'three';
import { GSAP } from 'gsap';

export default {
  data() {
    return {
      slides: [
        require('@/assets/slide1.jpg'),
        require('@/assets/slide2.jpg'),
        // Add more slides as needed
      ],
    };
  },
  mounted() {
    this.initSlideshow();
  },
  methods: {
    initSlideshow() {
      // Existing code...

      const textures = this.slides.map(slide => new THREE.TextureLoader().load(slide));
      const materials = textures.map(texture => new THREE.MeshBasicMaterial({ map: texture }));

      const cube = new THREE.Mesh(geometry, materials);
      scene.add(cube);

      // Existing code...

      const animate = () => {
        requestAnimationFrame(animate);

        // GSAP animation logic
        GSAP.updateRoot(time => {
          const elapsedTime = time / 1000; // Convert milliseconds to seconds
          tl.progress(elapsedTime);
        });

        renderer.render(scene, camera);
      };

      animate();
    },
  },
};
</script>

<style scoped>
.slideshow-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

Running the Application:

Run the following commands to see the slideshow in action:

npm install
npm run serve

Visit http://localhost:8080 in your browser to experience the Vue.js slideshow component 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

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 [email protected]
# or using npm
npm i [email protected]

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

Methods

Events emitted

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.