04/10/24, 18:58 Liquid Distortion Effects | Codrops

Liquid Distortion Effects

A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
By Yannis Yannakopoulos in Playground on October 10, 2017

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 1/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

Demo Code

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 2/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

From our sponsor: Chromatic - Visual testing for Storybook, Playwright

& Cypress. Catch UI bugs before your users do.

Today we’d like to share an interesting distortion effect with you. The main concept of this demo is to
use a displacement map in order to distort an underlying image, giving it different types of effects. To
demonstrate the liquid-like transitions between images, we’ve created a slideshow.

What a displacement map generally does, is using an image as a texture, that is later applied to an
object, giving the illusion that the underlying object is wrapped around that texture. This is a
technique commonly used in many different areas, but today we’ll explore how this can be applied to
a simple image slideshow.

We’ll be using PixiJS as our renderer and filtering engine and GSAP for our animations.

Getting Started
In order to have a displacement effect, you need a displacement map texture. In this demo’s code
we’ve provided with different types of textures you can use, but of course you can create one of your
own, for example by using Photoshop’s render tool. Keep in mind that this image’s dimensions
affect the end result, so playing around with differently sized textures, might give you different effect
looks.

A general rule of thumb is that your texture image should be a power of 2 sized texture. What this
means is that its width and height can be doubled-up or divided-down by 2. This ensures that your
texture is optimized to run fast, without consuming too much memory. In other words the suggested

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 3/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

dimensions for your texture image (width and/or height), would be: 8, 16, 32, 64, 128, 256, 512,
1024, 2048 etc.

For the demos, we’ve created a slideshow that, when navigating, shows the effect as a transition on
the slides. We’ll also add some other options, but we’ll just go through the main idea of the distortion
effect.

Markup
Our base markup for this demo is really minimal. We just need the navigation buttons for our slider
and a wrapper for the slides. We use this wrapper to pass our slides to our component, therefore we
hide it by default with CSS. This markup to JS approach may simplify the task of adding images to
the slideshow, when working in a more dynamic environment. However, if it suits you better, you
could just easily pass them as an array, upon initializing.

<div class="slide-wrapper">
<div class="slide-item">
<h3 class="slide-item__title">Slide 1</h3>
<img src="..." class="slide-item__image">
</div>
<div class="slide-item">
<h3 class="slide-item__title">Slide 2</h3>
<img src="..." class="slide-item__image">
</div>
<div class="slide-item">
<h3 class="slide-item__title">Slide 3</h3>
<img src="..." class="slide-item__image">
</div>
</div>

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 4/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

<a href="#" class="scene-nav scene-nav--prev" data-nav="previous">PREV</a>

<a href="#" class="scene-nav scene-nav--next" data-nav="next">NEXT</a>

CSS
In our CSS we hide our wrapper and position the navigation buttons at the left and right edges of the
viewport.

.slide-wrapper {
display: none;
}

.scene-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: inline-block;
}

.scene-nav--next {
right: 2%;
}

.scene-nav--prev {
left: 2%;
}

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 5/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

Tiny break: 📬 Want to stay up to date with frontend and trends in web design?
Subscribe and get our Collective newsletter twice a tweek.

Setting up the stage

The idea is fairly simple: we add all of our slides into a container, apply the displacement filter and
render. Then, when clicking the navigation buttons, we set the alpha property of the current image to
0, set the next one’s to 1 and tweak the displacement filter while navigating.

var renderer = new PIXI.autoDetectRenderer();

var stage = new PIXI.Container();
var slidesContainer = new PIXI.Container();
var displacementSprite = new PIXI.Sprite.fromImage( displacementImage );
var displacementFilter = new PIXI.filters.DisplacementFilter( displacementSprite );

// Add canvas to the HTML

document.body.appendChild( renderer.view );

// Add child container to the stage

stage.addChild( slidesContainer );

// Set the filter to stage

stage.filters = [displacementFilter];

// We load the sprites to the slides container and position them at the center of the stage
// The sprites array is passed to our component upon its initialization
// If our slide has text, we add it as a child to the image and center it
function loadPixiSprites( sprites ) {

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 6/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

for ( var i = 0; i < sprites.length; i++ ) {

var texture = new PIXI.Texture.fromImage( sprites[i] );

var image = new PIXI.Sprite( texture );

if ( texts ) {

// Base styles for our Text

var textStyle = new PIXI.TextStyle({
fill: '#ffffff',
wordWrap: true,
wordWrapWidth: 400
});

var text = new PIXI.Text( texts[i], textStyle);

image.addChild( text );

// Center each to text to the image

text.anchor.set(0.5);
text.x = image.width / 2;
text.y = image.height / 2;

image.anchor.set(0.5);
image.x = renderer.width / 2;
image.y = renderer.height / 2;

slidesContainer.addChild( image );

};

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 7/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

That would be the most basic setup you’d need in order for the scene to be ready. Next thing we
want to do is handle the clicks of the navigation buttons. Like we said, when the user clicks on the
next or previous button, we change the alpha property of the according slide and tweak our
Displacement Filter. We use a simple timeline for this, which you could of course customize
accordingly.

// We listen at each navigation element click and call the move slider function
// passing it the index we want to go to
var currentIndex = 0;
var slideImages = slidesContainer.children;
var isPlaying = false;

for ( var i = 0; i < nav.length; i++ ) {

var navItem = nav[i];

navItem.onclick = function( event ) {

// Make sure the previous transition has ended

if ( isPlaying ) {
return false;
}

if ( this.getAttribute('data-nav') === 'next' ) {

if ( that.currentIndex >= 0 && that.currentIndex < slideImages.length - 1 ) {

moveSlider( currentIndex + 1 );
} else {
moveSlider( 0 );
}

} else {

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 8/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops
if ( that.currentIndex > 0 && that.currentIndex < slideImages.length ) {
moveSlider( currentIndex - 1 );
} else {
moveSlider( spriteImages.length - 1 );
}

return false;

// Our transition between the slides

// On our timeline we set the alpha property of the relevant slide to 0 or 1
// and scale out filter on the x & y axis accordingly
function moveSlider( newIndex ) {

isPlaying = true;

var baseTimeline = new TimelineMax( { onComplete: function () {

that.currentIndex = newIndex;
isPlaying = false;
}});

baseTimeline
.to(displacementFilter.scale, 1, { x: 200, y: 200 })
.to(slideImages[that.currentIndex], 0.5, { alpha: 0 })
.to(slideImages[newIndex], 0.5, { alpha: 1 })
.to(displacementFilter.scale, 1, { x: 20, y: 20 } );

};

Finally, we have to render our scene and optionally add some default animations.

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 9/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

// Use Pixi's Ticker class to render our scene

// similar to requestAnimationFrame
var ticker = new PIXI.ticker.Ticker();
ticker.add( function( delta ) {

// Optionally have a default animation

displacementSprite.x += 10 * delta;
displacementSprite.y += 3 * delta;

// Render our stage

renderer.render( stage );

});

Working Demo
This should sum up the most basic parts of how the demo works and give you a good starting point
if you want to edit it according to your needs. However, if you don’t want to mess with too much
code and need a quick working demo to play on your own, there are several options you could use
when you initialize the component. So just include the script on your page and add the following
code wherever you want to show your slideshow. Play around with different values to get started
and don’t forget to try out different displacement map textures for different effects.

// Select all your images

var spriteImages = document.querySelectorAll( '.slide-item__image' );
var spriteImagesSrc = [];
var texts = [];

for ( var i = 0; i < spriteImages.length; i++ ) {

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 10/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

var img = spriteImages[i];

// Set the texts you want to display to each slide

// in a sibling element of your image and edit accordingly
if ( img.nextElementSibling ) {
texts.push(img.nextElementSibling.innerHTML);
} else {
texts.push('');
}

spriteImagesSrc.push( img.getAttribute('src' ) );

// Initialise the Slideshow

var initCanvasSlideshow = new CanvasSlideshow({

// pass the images you want as an array

sprites: spriteImagesSrc,

// if you want your slides to have title texts, pass them as an array
texts: texts,

// set your displacement texture

displacementImage: 'https://imgur.com/a/Ea3wo',

// optionally start with a default animation

autoPlay: true,

// [x, y] controls the speed for your default animation

autoPlaySpeed: [10, 3],

// [x, y] controls the effect amount during transitions

displaceScale: [200, 70],

// choose whether or not you slideshow will take up all the space of the viewport

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 11/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops
fullScreen: true,

// If you choose to not have a fullscreen slideshow, set the stage's width & height accordingly
stageWidth: 800,
stageHeight: 600,

// add you navigation element. Should have a 'data-nav' attribute with a value of next/previous
navElement: document.querySelectorAll( '.scene-nav' ),

// will fit the filter bounding box to the renderer

displaceAutoFit: false

});

Interactive
Last thing we want to do is optionally make our stage interactive. That is instead of auto playing,
have our effect interact with our mouse. Just set the the interactive property to be true and play
around with your mouse.

var initCanvasSlideshow = new CanvasSlideshow({

interactive: true
...
});

In all mouse interactions we listen for the corresponding event, and based on the event data, we
scale our displacement event respectively. It looks like this:

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 12/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

// Set our container to interactive mode

slidesContainer.interactive = true;
slidesContainer.buttonMode = true;

// Our animation
var rafID, mouseX, mouseY;

function rotateSpite() {
displacementSprite.rotation += 0.001;
rafID = requestAnimationFrame( rotateSpite );
}

slidesContainer.pointerover = function( mouseData ){

mouseX = mouseData.data.global.x;
mouseY = mouseData.data.global.y;
TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.co
rotateSpite();
}

slidesContainer.pointerdown = function( mouseData ){

mouseX = mouseData.data.global.x;
mouseY = mouseData.data.global.y;
TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 1200 + "", y: "+=" + Math.c
}

slidesContainer.pointerout = function( mouseData ){

TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 });
cancelAnimationFrame( rafID );
}

slidesContainer.pointerup = function( mouseData ){

TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 });
cancelAnimationFrame( rafID );
}

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 13/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops

Simple as that! Hope this demo gives you a good starting point to play around with different filters
and make it easy for you to create your own.
distortion pixi.js slideshow webgl

Yannis Yannakopoulos

Interactive Developer. Currently exploring Generative Art, WebGL, GLSL & Web
Audio. Musicing at The Blimp!.

Website X Instagram

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 14/15
04/10/24, 18:58 Liquid Distortion Effects | Codrops
Sketchy Pencil Effect with Hover Motion Intro Animation On-Scroll 3D Stack Motion Effect
Three.js Post-Processing

https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ 15/15