Jump to content

Stop Animation of Displacement Sprite on Hover


Recommended Posts


i'm very new to pixi.js, and am not experienced as a programmer in general. so, i'm sorry if these are very obvious questions.

essentially, i'd like to apply a displacement sprite to several images on a page. and have it so when each image/stage is hovered it stops the animation of the filter. ideally, it would revert back to the un-manipulated image on an individual basis (hovering on a single image would not stop the filter for all images), but if it froze all of the sprites at once that would be great too.

currently, i'm working from code i found in this JSFiddle:


but am not sure how to add the interactivity i'm looking for.

any help is appreciated! thanks you.

Link to comment
Share on other sites

First thing is, its better to use one renderer and not three. Add three sprites, add displacement sprite inside each of them

sprite1.position.set(200, 0); //x=200

sprite1.filters = [new DisplacementFilter(...)]; 

//three times that

That thing can fix your problems with interaction, because right now there are three interaction managers and they dont know about each other.

Link to comment
Share on other sites

34 minutes ago, mersault said:

@ivan.popelyshev, thanks for your response! i will integrate your suggestion into my code. i think my question may be even more rudimentary than you think. i'm just not sure how to stop the animation at all... 

//create sprite
var sprite = new PIXI.Sprite(spriteTexture);
sprite.addChild(new PIXI.Sprite(displacementTexture));
sprite.filters = [new DisplacementFilter(sprite.children[0])];

//in animation cycle
if (!sprite._over) {
  //_over is not documented, but it actually exist
   var filter = sprite._filters[0];
   filter.offset.x += offset;
   filter.offset.y += offset;

do that thing only if corresponding "sprite._over" , that means that 

Link to comment
Share on other sites

One more questions about interaction.

Is it possible to when interacting with one element affect another? Specifically, I'm trying to extend this project so text link will correspond to one of the filters and stop it from moving on one of the sprites.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...