/ripple-hover-effect

Javascript library to animate images on hover.

Primary LanguageJavaScriptMIT LicenseMIT

Ripple Hover Effect

Javascript library to animate images on hover.

If this project help you, don't forget to star it.

Codepen demo by Essam Abed

Demo

ripple-effect-demo.mp4

Installation

Install using npm:

    npm i ripple-hover-effect

Or use a cdn:

https://unpkg.com/browse/ripple-hover-effect@1.0.0/src/ripple-effect.js

Use locally

To load the images you'll need to view the demo via a web server, simply open the projet with vscode then run the index.html file with Live Server.

Basic usage

This little library needs Three.js and Gsap to do the transition, so you need to include it before this library.

How it works:

<!-- Div to draw the effect on -->
<div class="my-div"></div>

<!-- library needed -->
<script src="three.min.js"></script>
<script src="gsap.min.js"></script>

<script src="dist/ripple-effect.js"></script>
<script>
    var ripple = new RippleEffect({
        parent: document.querySelector('.my-div'),
        intensity: 1,
        strength: 2,
        area: 4,
        waveSpeed: 0.001,
        speedIn: 2,
        speedOut: 1.5,
        easing: 'Expo.easeInOut',
        hover: true,
        texture: './img/my-img.jpg',
    });
</script>

Options

Mandatory parameters

Name Type Default Description
parent Dom element null The DOM element where the animation will be injected. The images of the animation will take the parent's size.
texture Image null The Image of the animation.

Optional parameters

Name Type Default Description
intensity Float 1 Used to determine the intensity of the ripple effect. 0 is no effect and 1 is full ripple.
strength Float 2 Strength of the ripple effect.
area Float 6 Area affected by the ripple effect.
waveSpeed Float 0.01 Ripple waves travel speed.
speedIn Float 1.4 Speed of the inbound animation (in seconds).
speedOut Float 1.2 Speed of the outbound animation (in seconds).
hover Boolean true if set to false the animation will not be triggered on hover (see start and stop function to interact)
easing String Expo.easeOut Easing of the transition, see greensock easing

Methods

Name Description
start Start the ripple effect.
stop Stop the ripple effect.

Credits

Thanks to :

Example

WebGL.Ripple.Effect.mp4