Jump to content
Search Community

Warping background image

BeckBeach test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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.
×
×
  • Create New...