PixiJs Filter in onUpdate()

[dazzafact]

Hello, 
iam using PixiJs Filters . Now i want to combine it with Event "onUpdate"
Is it possible to change a the variable Blur while run through Event?

(this example below does'nt really work. It's just an example of what I was roughly imagining.
 

$tl =gsap.timeline({})

$blurFilter1 = new PIXI.filters.BlurFilter();

$slides.filters=$blurFilter1
$blurFilter1.blur=0

$tl.to($slides,{duration:5, onUpdate:function(){
					  var blur1= gsap.getProperty(this.targets()[0], "blur")
					  blur1 +=0.01
				   gsap.set(this, {pixi:{filters:{blur:blur1}}});
				   } },'>')

 

[OSUblake]

Hi dazzafact,

 

"blur" wouldn't be a property of the target as it's a property of the filter. And you probably never need to use gsap.getProperty with PixiJS as everything is available on the object. gsap.getProperty really only makes sense for elements because it has to look up style properties.

 

If you want to animate the blur, just do it directly.

 

.to($blurFilter1, {
  blur: 20
})

 

Even if you wanted to do the onUpdate thing, you would still just update it directly.

$blurFilter1.blur += 0.1;

 

[dazzafact]

 

Yes, you are right, this  works! 🤍
 But i thought i could write it at once, not twice

 

$tl.to([$slides,$blurFilter1],{duration:5 },'>') // :-/ doesnt work


$tl.to($slides,{duration:5,  },'>') //only seperate
$tl.to($blurFilter1,{duration:5,  },'>')

 

[OSUblake]

No, for it to work together like that, everything in the array would need to be similar type of object with the same properties, like all sprites or all filters. 

 

 

[dazzafact]

1 hour ago, OSUblake said:

No, for it to work together like that, everything in the array would need to be similar type of object with the same properties, like all sprites or all filters. 

 

Sadly,... but i just find a quick Solution to write it once :

 

$tl.to($slides,{
  onUpdate:function(blur1){
    blur1.blur+=0.1},
  onUpdateParams: [ $blurFilter1 ],duration:imageTimes+fade,  pixi: {.... } },'>')

Thank you, anyway

[OSUblake]

You really don't need the onUpdateParams as you already have the target.

 

$tl.to($slides,{
  onUpdate:function(){
    $blurFilter1.blur+=0.1},
  ,duration:imageTimes+fade,  pixi: {.... } },'>')

 

[dazzafact]

15 hours ago, OSUblake said:

You really don't need the onUpdateParams as you already have the target.

 

$tl.to($slides,{
  onUpdate:function(){
    $blurFilter1.blur+=0.1},
  ,duration:imageTimes+fade,  pixi: {.... } },'>')

Thanks for this hint, but iam using this code in a loop to create a Slideshow. So there are varoius Blur Instances
I've kept the code slim to give you a better overview
 

for (k in $allSlides){

$slides=$allSlides[k]['slides']
$blurFilter1= new PIXI.filters.BlurFilter($allSlides[k]['filter_options'],..,..);

//...

$tl.to($slides,{
    onUpdate:function(blur1){
    blur1.blur+=0.1},
  onUpdateParams: [ $blurFilter1 ],duration:imageTimes+fade,  pixi: {.... } },'>')

}