dazzafact Posted March 3, 2022 Share Posted March 3, 2022 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}}}); } },'>') Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2022 Share Posted March 3, 2022 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; 3 Link to comment Share on other sites More sharing options...
dazzafact Posted March 3, 2022 Author Share Posted March 3, 2022 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, },'>') Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2022 Share Posted March 3, 2022 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. 1 Link to comment Share on other sites More sharing options...
dazzafact Posted March 3, 2022 Author Share Posted March 3, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2022 Share Posted March 3, 2022 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: {.... } },'>') 1 Link to comment Share on other sites More sharing options...
dazzafact Posted March 4, 2022 Author Share Posted March 4, 2022 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: {.... } },'>') } 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now