Jump to content
GreenSock

kenarai

Animation Issue with Pixi TiltShiftFilter()

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

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 comment
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 comment
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 comment
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 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.
×