Overview

The Vue Displacement Slideshow component is an innovative tool for creating stunning image transitions with ease. Built on the powerful frameworks of Vue.js, Three.js, and GSAP, it offers a visually striking way to showcase images with distinctive displacement effects. Whether you’re a developer seeking to elevate a web application, or simply looking for a fresh approach to display your photography or artwork, this component caters to various needs while being compatible with both Vue2 and Vue3.

This slideshow not only provides unique image displacement transitions but also has the capability to be interactive, engaging viewers in a beautiful and dynamic presentation. With a seamless installation process and customizable properties, it allows for extensive flexibility in integrating captivating visual experiences into your projects.

Features

• Compatibility with Vue Versions: Supports both Vue2 (up to 3.0.1) and Vue3, making it versatile for different project requirements.

• Interactive Canvas: By enabling the isInteractive prop, the canvas can respond to mouse movements, enhancing user engagement.

• Customizable Image Array: Users can easily supply an array of image paths that they want to display, providing flexibility for varying content.

• Displacement Image Control: Specify the path for a displacement image that adds depth to transitions, creating stunning visual effects.

• Adjustable Transition Intensity: The intensity prop allows users to fine-tune the displacement effect, offering control over the visual impact of transitions.

• Animation Speed Settings: Customize the duration of the image transitions with speedIn and speedOut parameters for a tailored user experience.

• GSAP Easing Options: Select from various easing options using the ease prop, ensuring smooth transitions that match the desired aesthetic.

• Aspect Ratio Preservation: Maintain the aspect ratio of images during transitions by toggling the preserveAspectRatio prop to create a polished look.