CODEWITHSUNDEEP
javascripthtml5-canvas
andmar204
andmar204

Reputation: 49

How to make water rippling/glistening animation in JavaScript?

I was looking at the code of this website (http://lbebber.github.io/public/) to see how the background was made, and it looks like the ripple effect is made using just the canvas element and JavaScript. But the JavaScript is super minified, so it's hard to find out how it works. Where can I read about this and how can I use it in websites of my own?

Upvotes: 1

Views: 2585

Answers (1)

Victor.Chou
Victor.Chou

Reputation: 322

I make a Demo, use Pixi.js for rendering graphics and GSAP for animations.

Pixi: http://www.pixijs.com/
GSAP: https://greensock.com/

First, your need to prepare 2 images.

1. Ripple texture

enter image description here

2. Background

enter image description here

Create image sprites in container.

var circle = PIXI.Sprite.fromImage(rippleMesh); /* Ripple texture */
var bg = PIXI.Sprite.fromImage(textureBg); /* background */

Add DisplacementFilter object for animation.

var filter = new PIXI.filters.DisplacementFilter(circle);

Then add into Pixi stage.

ripple.addChild(bg, circle);
stage.addChild(ripple);

At last, use GSAP to animate DisplacementFilter.

TimelineMax.to(circle.scale, 1.5, {
   repeatDelay: 0,
   x: 1.6,
   y: 1.6,
   ease,
   repeat: -1
 });

 TimelineMax.to(filter.scale, 1.5, {
   repeatDelay: 0,
   x: 0,
   y: 0,
   ease,
   repeat: -1
 });

Btw, if you want to make effect same as http://lbebber.github.io/public/, simply redraw the ripple texture into linear.

Upvotes: 1

Related Questions