Jump to content
GreenSock

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

Animation Issue with Pixi TiltShiftFilter()

Recommended Posts

Hello GSAP pals, I came across with this weird issue, and I need your inputs.

 

I am trying to animate items with TiltShiftFilter() filter enabled, and I get this strange residual afterimage.

All I want to achieve is to simply move things around UNDER the TiltShiftFilter() like you see on Pixi demo.

 

Do you guys have any suggestions? 

 

 

 

 

ezgif.com-optimize.gif

See the Pen ExYpEbX by kenarai (@kenarai) on CodePen

Link to post
Share on other sites
2 hours ago, kenarai said:

I am trying to animate items with TiltShiftFilter() filter enabled, and I get this strange residual afterimage.

 

It probably needs something in the background to blend with. Try adding this.

 

var bg = new PIXI.Sprite(PIXI.Texture.WHITE);
bg.width = app.screen.width;
bg.height = app.screen.height;

// If you want to change the color
bg.tint = 0xbaf7ff;

// 'container' will host various items
var container = new PIXI.Container(); 
container.addChild(bg);

 

 

2 hours ago, kenarai said:

All I want to achieve is to simply move things around UNDER the TiltShiftFilter() like you see on Pixi demo.

 

You should also check out the source code for that demo. A good place to learn. It's using v5, so some stuff might be slightly different.

https://github.com/pixijs/pixi-filters/blob/master/tools/demo/src/DemoApplication.js

https://github.com/pixijs/pixi-filters/tree/master/tools/demo

 

 

  • Like 4
Link to post
Share on other sites

@OSUblake Thank you for the swift and accurate reply. 

 

I implemented your code snippet to the above example, and you are right, it works perfectly.

The key to work with TiltShiftFilter(), and perhaps other similar filters, is to always have background texture to blend with.

 

For those of you who stumbled upon the same issue, see the link below ...

See the Pen wvwEMXz by kenarai (@kenarai) on CodePen

 

Thank you!

  • Like 2
Link to post
Share on other sites
31 minutes ago, kenarai said:

The key to work with TiltShiftFilter(), and perhaps other similar filters, is to always have background texture to blend with.

 

Yeah, if the filter does any type of blurring or like a drop shadow, it will need some type of background to show up correctly.

  • Like 1
Link to post
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.

×