Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BeckBeach

Warping background image

Recommended Posts

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.

Link to comment
Share on other sites

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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

 

 

 

 

 

 

  • Like 4
Link to comment
Share on other sites

daaaaaaang! ?

 

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

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×