Warping background image

[BeckBeach 2 Likes (Newbie)]

Hi! I am trying to figure out how a warping animated background could be created using GSAP. This website here: https://titan.viita-watches.com/en/ has a marble background image that is moving. I looked at the source and the background is a jpg. I'm not sure how it is moving. The site uses GSAP TweenMax and Scroll Magic after looking at the javascript here: https://titan.viita-watches.com/en/dist/build.js

 

Does anyone have any ideas? I would like to achieve the same effect on my own website.

[PointC 8,599 Likes (Superhero)]

Looks like they're using Pixi with a displacement map.

http://www.pixijs.com/

 

Here's a demo from a different thread that shows the basics of how it works. 

See the Pen XBderZ by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

 

[BeckBeach 2 Likes (Newbie)]

Wow that's really cool. I never heard of PIXIJs.

[PointC 8,599 Likes (Superhero)]

Yep, it's super cool. GreenSock also has a plugin dedicated to controlling parts of it.

https://greensock.com/?product-plugin=js-pixiplugin

 

If you search the forum for "pixi' you'll find a ton of posts and demos by our resident expert @OSUblake.

 

Happy tweening.

 

[OSUblake 9,990 Likes (Superhero)]

On 9/20/2018 at 11:46 AM, PointC said:

Looks like they're using Pixi with a displacement map.

 

I thought that was a custom shader when I first saw it. I looked at the the source code, and they are using a displacement map, but I noticed a shader in there was commented out.

 

Let's see what it does. ?

 

It's a fragment shader, which runs every pixel through the main function to get it's color. That's what gets set on gl_FragColor. It's an rgba value, but uses values from 0.0 to 1.0 instead of 0 to 255. 

 

The uniforms are like the attributes for an SVG filter. That's how you pass values from JavaScript to the shader.

 

precision mediump float;
varying vec2 vTextureCoord;
  
uniform sampler2D uSampler;  
uniform float time;
uniform float frequency;
uniform float amplitude;
uniform float amplitudeY;
uniform float speed;

void main() {    
  vec2 position = vTextureCoord;    
  float distortion = sin(position.y * frequency + time * speed) * amplitude;
  float distortion2 = sin(position.y * frequency + time * speed) * amplitudeY;
  gl_FragColor = texture2D(uSampler, vec2(position.x + distortion, position.y + distortion2));
}

 

 

To use it, all we need to do is create a new filter and set the uniforms. The time uniform needs to be increased on every tick. The other uniforms can be animated by GSAP.

 

var filter = new PIXI.Filter(null, shaderFrag);
filter.uniforms.frequency = 0.0;
filter.uniforms.amplitude = 0.0005;
filter.uniforms.amplitudeY = 0.0;
filter.uniforms.speed = 2.0;
filter.uniforms.time = 0.0;

myContainer.filters = [filter];

// update time value
app.ticker.add(function(delta) {
  filter.uniforms.time += 0.05 * delta;
});

 

 

 

If you couldn't tell from the uniform names, it's a wave filter.

 

See the Pen QVozey by osublake (@osublake) on CodePen

 

 

 

 

 

 

[PointC 8,599 Likes (Superhero)]

daaaaaaang! ?

 

Somebody's getting pretty fancy for a Friday afternoon. That's really cool Blake. I'll be stealing that.