Realistic Water Ripple Effect Using WebGL – ripple-effect.js

Preview:

Description:

A vanilla JavaScript library that applies realistic water ripple effect to images using WebGL.

Based on Three.js and GSAP JavaScript libraries.

See It In Action:

See Also:

• jQuery Plugin For Water Ripple Animation – ripples

How to use it:

1. Load the needed JavaScript libraries as follows:

<!-- Three.js -->
<script src="/path/to/cdn/three.min.js"></script>
<!-- GSAP -->
<script src="/path/to/cdn/gsap.min.js"></script>
<!-- ripple-effect.js -->
<script src="src/ripple-effect.min.js"></script>

2. Create a container to hold the image.

<div class="example"></div>

3. Apply a basic ripple effect to the image.

var rippleDemo = new RippleEffect({
    parent: document.querySelector('.example'),      
    texture: '/path/to/image.jpg',
});

4. Config the ripple effect with the following parameters:

var rippleDemo = new RippleEffect({
    parent: document.querySelector('.example'),      
    texture: '/path/to/image.jpg',
    intensity: 1,
    strength: 2,
    area: 6,
    waveSpeed: 0.01,
    hover: true, // trigger the animation on hover
    speedIn: 1.4,
    speedOut: 1.2,
    easing: 'Expo.easeOut',
});

5. Start & Stop the animation manually.

rippleDemo.start
rippleDemo.stop

Changelog:

09/07/2021

• Code refactor