{"id":15507071,"url":"https://github.com/albancrepel/vue-displacement-slideshow","last_synced_at":"2025-04-06T03:05:59.972Z","repository":{"id":44839624,"uuid":"157028299","full_name":"AlbanCrepel/vue-displacement-slideshow","owner":"AlbanCrepel","description":"A Vue.js slideshow component working with Three.js","archived":false,"fork":false,"pushed_at":"2023-07-31T09:48:29.000Z","size":13872,"stargazers_count":213,"open_issues_count":4,"forks_count":28,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-30T02:08:15.675Z","etag":null,"topics":["images","slideshow","threejs","vuejs","webgl"],"latest_commit_sha":null,"homepage":"https://vue-displacement-slideshow.now.sh","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlbanCrepel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-11-10T22:46:49.000Z","updated_at":"2025-01-21T09:08:12.000Z","dependencies_parsed_at":"2024-01-08T08:57:00.814Z","dependency_job_id":null,"html_url":"https://github.com/AlbanCrepel/vue-displacement-slideshow","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbanCrepel%2Fvue-displacement-slideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbanCrepel%2Fvue-displacement-slideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbanCrepel%2Fvue-displacement-slideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbanCrepel%2Fvue-displacement-slideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlbanCrepel","download_url":"https://codeload.github.com/AlbanCrepel/vue-displacement-slideshow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427005,"owners_count":20937200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["images","slideshow","threejs","vuejs","webgl"],"created_at":"2024-10-02T09:29:43.182Z","updated_at":"2025-04-06T03:05:59.950Z","avatar_url":"https://github.com/AlbanCrepel.png","language":"Vue","funding_links":["https://ko-fi.com/alban_crepel"],"categories":[],"sub_categories":[],"readme":"# vue-displacement-slideshow\n\n\u003e Webgl image displacement transitions made simple. A Vue.js slideshow component working with Three.js and GSAP.\nIt works with Vue3 and older versions (until 3.0.1) work with Vue2.\n\n## Demo\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"lib/assets/demo.gif\" width=\"400px\" height=\"auto\" alt=\"Demo gif\"/\u003e\n\u003c/p\u003e\n\n\u003e The canvas can be interactive as well by setting the `isInteractive` props to `true`. See the `props` section to find more.\n\n## Live demo\n\n[DEMO](https://vue-displacement-slideshow.now.sh)\n\n## Installation\n\n```bash\n# using yarn\nyarn add vue-displacement-slideshow\n# or using npm\nnpm i vue-displacement-slideshow\n```\n\n:warning: If you are using this component with Vue2, you have to use this version: `3.0.1`, as \nthe ones that follow only support Vue3. You can install a particular version like this:\n\n```bash\n# using yarn\nyarn add vue-displacement-slideshow@3.0.1\n# or using npm\nnpm i vue-displacement-slideshow@3.0.1\n```\n\n## Example\n\n```vue\n\u003ctemplate\u003e\n    \u003cvue-displacement-slideshow\n            :images=\"images\"\n            displacement=\"require('../assets/displacement.png')\"\n            :intensity=\"0.2\"\n            :speedIn=\"1.4\"\n            :speedOut=\"1.4\"\n            ease=\"expo.out\"\n            ref=\"slideshow\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    import VueDisplacementSlideshow from \"vue-displacement-slideshow\";\n\n    export default {\n        components: {\n            VueDisplacementSlideshow,\n        },\n        computed: {\n            images() {\n                return [\n                    require(\"../assets/images/1.jpg\"),\n                    require(\"../assets/images/2.jpg\"),\n                    require(\"../assets/images/3.jpg\")\n                ];\n            }\n        },\n        methods: {\n            init() {\n                //We loop through all our images by calling the 'next' method of our component every 2 seconds\n                setInterval(() =\u003e {\n                    this.$refs.slideshow.next();\n                }, 2000);\n            }\n        },\n        mounted() {\n            this.init();\n        }\n    };\n\u003c/script\u003e\n\n```\n\n**With Nuxt :**\n\nJust wrap the component in a `client-only` component like so :\n```html\n\u003cclient-only\u003e\n    \u003cvue-displacement-slideshow /\u003e\n\u003c/client-only\u003e\n```\n\nThis component is heavily based on this library :\n[https://github.com/robin-dela/hover-effect](https://github.com/robin-dela/hover-effect)\n\n## Props\n\n| name         |  type  | description                                                      | required | default value |\n|--------------|:------:|------------------------------------------------------------------|----------|---------------|\n| images       | `Array`  | An array containing the paths of the images you wan to use       | `true`     | `[]`            |\n| displacement | `String` | The path of the displacement image                               | `true`     |           |\n| intensity    | `Number` | The intensity of the displacement                                | `false`    | `1`             |\n| speedIn      | `Number` | The duration of the animation for the next image, in seconds     | `false`    | `1`             |\n| speedOut     | `Number` | The duration of the animation for the previous image, in seconds | `false`    | `1`             |\n| ease         | `String` | The GSAP easing to use                                           | `false`    | `expo.inOut`      |\n| preserveAspectRatio| `Boolean` | Whether the images keep their aspect ratio (act as `background-size` : `cover` (`true`) or `contain`  (`false`)  | `false`    | `true`  |\n| isInteractive| `Boolean`| Whether the canvas is interactive on mouse move | `false`    | `false`  |\n| interactionFactor| `Number` | The factor of the interaction | `false`    | `1`  |\n| interactionDuration| `Number` | The duration of the interaction | `false`    | `1`  |\n| startAsTransparent| `Boolean` | Whether the canvas  is initially transparent and the first transition goes to the first picture | `false`    | `false`  |\n| angle| `Number` | The angle of the transition | `false`    | `Math.PI / 4`  |\n\n## Methods\n\n| Name                    | Description             |Params|Returns\n|-------------------------|-------------------------|----------|----------|\n|next                     | Transition to the second image. |      |`void`|\n|previous                 | Transition to the first image. |      |`void`|\n|pause                 | Pause the current transition |     |`void`|\n|play                 | Play the current paused animation |     |`void`|\n|insertImage(path,index)                 | Insert an image at a given index |\u003cul\u003e\u003cli\u003e`path` : the path of the image \u003c/li\u003e\u003cli\u003e`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)\u003c/li\u003e\u003c/ul\u003e|a Promise resolved when the image is loaded|\n|insertTransparentTexture(index)                 | Insert a transparent texture at a given index |\u003cul\u003e\u003cli\u003e`index` : the index of the inserted image, it has the same behavior as  the `insertImage` `index`  parameter |  `void` |\n|removeImage(index)                 | Remove an image at a given index |\u003cul\u003e\u003cli\u003e`index` : the index of the image to remove (must be different from the current image index)\u003c/li\u003e\u003c/ul\u003e| `void`|\n|goTo(index)                 | Transition to a given image by its index |\u003cul\u003e\u003cli\u003e`index` : the index of the image to transition to\u003c/li\u003e\u003c/ul\u003e| `void`|\n\n## Events emitted\n\n| Name                    | Description             |\n|-------------------------|-------------------------|\n|loaded                     | Fired when the component is ready |\n|animationEnd                 | Fired when the transition is done. |\n\n\n## Behavior\n\nThe first image of the array is displayed at first.\nWhen we call the `next` method while currently showing the last image, it will go to the first image.\nWhen we call the `previous` method while currently showing the first image, it will go to the last image.\n\nThe images are displayed as we would use `background-size:cover` in CSS.\n\nIf you set the prop `startAsTransparent` to `true`, then it **adds a texture to your `images` array**. If you want to \nremove it after, you can just call the `removeImage` method with `0` as the index parameter value.\n\n## Contributing\n\nContributions are welcome !\nFollow the instructions in the [contributing file](./CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENCE)\n\n## Support\n\nIf you find the component useful, you can support my open source work via [my ko-fi page](https://ko-fi.com/alban_crepel).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbancrepel%2Fvue-displacement-slideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbancrepel%2Fvue-displacement-slideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbancrepel%2Fvue-displacement-slideshow/lists"}