{"id":13629774,"url":"https://github.com/robin-dela/hover-effect","last_synced_at":"2025-04-07T13:03:34.701Z","repository":{"id":41883515,"uuid":"126996636","full_name":"robin-dela/hover-effect","owner":"robin-dela","description":"Javascript library to draw and animate images on hover","archived":false,"fork":false,"pushed_at":"2023-06-27T00:32:24.000Z","size":62266,"stargazers_count":1823,"open_issues_count":24,"forks_count":305,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-03-31T12:03:03.416Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/robin-dela.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"dei":null},"funding":{"liberapay":"robin-dela"}},"created_at":"2018-03-27T14:10:15.000Z","updated_at":"2025-03-22T18:56:18.000Z","dependencies_parsed_at":"2024-04-09T21:57:43.783Z","dependency_job_id":null,"html_url":"https://github.com/robin-dela/hover-effect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robin-dela%2Fhover-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robin-dela%2Fhover-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robin-dela%2Fhover-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robin-dela%2Fhover-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robin-dela","download_url":"https://codeload.github.com/robin-dela/hover-effect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247657275,"owners_count":20974344,"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":[],"created_at":"2024-08-01T22:01:18.894Z","updated_at":"2025-04-07T13:03:34.683Z","avatar_url":"https://github.com/robin-dela.png","language":"HTML","readme":"# Hover effect\n\nJavascript library to draw and animate images on hover.\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=ZGDNS5D28SFWQ)\n\n[**DEMO**](https://tympanus.net/Development/DistortionHoverEffect/)\n\n[**ARTICLE**](https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/)\n\n## Example\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"example 1\" src=\"https://github.com/robin-dela/hover-effect/blob/master/gifs/1.gif?raw=true\" width=\"256\"\u003e\n    \u003cimg alt=\"example 2\" src=\"https://github.com/robin-dela/hover-effect/blob/master/gifs/2.gif?raw=true\" width=\"256\"\u003e\n\u003c/p\u003e\n\n## Use locally\nTo load the images you'll need to view the demo via a web server, simply go to the demo's folder location and type `python -m SimpleHTTPServer 8000` in your terminal. Then access the demo in your browser by typing: `localhost:8000`\n\n## Basic usage\n\nThis helper needs [Three.js](https://threejs.org) and [gsap](https://greensock.com/) to do the transition, so you need to include it before this little helper.\n\nThen you only need a `div` element in HTML to start animating things with a piece of code like this:\n\n```html\n\u003c!-- Div to draw the effect --\u003e\n\u003cdiv class=\"my-div\"\u003e\u003c/div\u003e\n\n\u003c!-- library needed --\u003e\n\u003cscript src=\"three.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"gsap.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript src=\"dist/hover.umd.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    var myAnimation = new hoverEffect({\n        parent: document.querySelector('.my-div'),\n        intensity: 0.3,\n        image1: 'images/myImage1.jpg',\n        image2: 'images/myImage2.jpg',\n        displacementImage: 'images/myDistorsionImage.png'\n    });\n\u003c/script\u003e\n```\n\n## Node JS usage\n\nThis helper can also be used in node js environments. Three.js and TweenMax scripts are included as dependencies in the package so you don't need to manually include them.\n\n### Install\n\n```\nnpm install hover-effect\n```\n\n### Import\n\n```js\nimport hoverEffect from 'hover-effect'\n```\n\n### Init\n\nInitialize just as you would in the basic usage example above.\n\n## Options\n\n### Mandatory parameters\n\n| Name                    | Type            | Default         | Description |\n|-------------------------|-----------------|-----------------|-------------|\n|`parent`                 | `Dom element`   | `null`          | The DOM element where the animation will be injected. The images of the animation will take the parent's size. |\n|`image1`                 | `Image`         | `null`          | The first `Image` of the animation. |\n|`image2`                 | `Image`         | `null`          | The second `Image` of the animation. |\n|`displacementImage`      | `Image`         | `null`          | The `Image` used to do the transition between the 2 main images. |\n\n### Optional parameters\n\n| Name                    | Type      | Default         | Description |\n|-------------------------|-----------|-----------------|-------------|\n|`intensity`              | `Float`   | `1`             | Used to determine the intensity of the distortion effect. 0 is no effect and 1 is full distortion. |\n|`intensity1`             | `Float`   | `intensity`     | Overrides the distortion intensity of the first image. |\n|`intensity2`             | `Float`   | `intensity`     | Overrides the distortion intensity of the second image. |\n|`angle`                  | `Float`   | `Math.PI / 4`   | Angle of the distortion effect in Radians. Defaults to Pi / 4 (45 degrees). |\n|`angle1`                 | `Float`   | `angle`         | Overrides the distortion angle for the first image. |\n|`angle2`                 | `Float`   | `-angle * 3`    | Overrides the distortion angle for the second image. |\n|`speedIn`                | `Float`   | `1.6`           | Speed of the inbound animation (in seconds). |\n|`speedOut`               | `Float`   | `1.2`           | Speed of the outbound animation (in seconds). |\n|`hover`                  | `Boolean` | `true`          | if set to false the animation will not be triggered on hover (see `next` and `previous` function to interact) |\n|`easing`                 | `String`  | `Expo.easeOut`  | Easing of the transition, see [greensock easing](https://greensock.com/ease-visualizer)|\n|`video`                  | `Boolean` | `false`         | Defines if you want to use videos instead of images (note: you need 2 videos, it doesn't work with one image and one video.) |\n|`imagesRatio`            | `Float`   | `1`             | Specify a value if you want a `background: cover` type of behaviour, otherwise it will apply a square aspect ratio. usage: `image height / image width` example: `1080 / 1920` |\n\n### Methods\n\n| Name                    | Description             |\n|-------------------------|-------------------------|\n|`next`                   | Transition to the second image. |\n|`previous`               | Transition to the first image. |\n\n## Credits\nThanks to :\n- [Codrops](https://twitter.com/crnacura) for the creation of the example\n- [Aarni Koskela](https://github.com/akx/) for the improvements\n- [Celso White](https://github.com/celsowhite) for the multiple module formats\n\n## Made with it\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"Alex Brown demo\" src=\"https://github.com/robin-dela/hover-effect/blob/master/gifs/alex_brown.gif?raw=true\" width=\"512\"\u003e\n\u003c/p\u003e\n\n- [Codepen demo](https://codepen.io/alxrbrown/pen/GxVQLr) and [Medium article](https://medium.com/@alxrbrown/create-a-distortion-hover-effect-using-webgl-32fc1ab50d24) by Alex Brown\n- [https://stimmt.digital/en/](https://stimmt.digital/en/)\n- [https://www.fabiofantolino.com/en](https://www.fabiofantolino.com/en)\n- [Youtube tutorial](https://www.youtube.com/watch?v=o0zlX1E7l0A)\n- [https://www.youtube.com/watch?v=9kcOQdJHyIo](https://www.youtube.com/watch?v=9kcOQdJHyIo)\n- [https://www.estudionk.com/en](https://www.estudionk.com/en)\n- [https://github.com/AlbanCrepel/vue-displacement-slideshow](https://github.com/AlbanCrepel/vue-displacement-slideshow)\n- [https://digitalpresent.io/about](https://digitalpresent.io/about)\n- [https://www.couleecreative.com/](https://www.couleecreative.com/)\n- [https://two.zero.nyc/](https://two.zero.nyc/)\n- [https://www.danilodemarco.com/](https://www.danilodemarco.com/)\n- [https://lsce.com/](https://lsce.com/)\n- [http://vadimtyurin.com/](http://vadimtyurin.com/)\n","funding_links":["https://liberapay.com/robin-dela","https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=ZGDNS5D28SFWQ"],"categories":["📦 Legacy \u0026 Inactive Projects","HTML","Canvas"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobin-dela%2Fhover-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobin-dela%2Fhover-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobin-dela%2Fhover-effect/lists"}