Only allow rounded numbers for interpolated values

[trych]

Hi there,
I am trying to animate a filter in pixi.js using gsap. However, it seems that this filter's size property only works with integer values. So I would my gsap tween need to animate from let's say 10 to 80, but only to return integers for the inbetween values. How is this possible?
 

gsap.to(myFilter, {
  size: 80,
  duration: 5
});

Thanks!

[Rodrigo]

Hi,

 

You can use the Snap Plugin for that:

https://greensock.com/docs/v3/GSAP/CorePlugins/SnapPlugin

 

It should be as simple as:

gsap.to(myFilter, {
  size: 80,
  snap: "size",
  duration: 5
});

This is a core plugin so you don't need to include any other file, import or register the plugin.

 

Let us know how it works.

 

Happy Tweening!!!

[trych]

@Rodrigo, thanks for looking into this, and sorry for not responding earlier, somehow I missed that there was a reply.

 

I gave your solution a try, however, it does not seem to work, unfortunately. Here is what I did:

gsap.to(myFilter, {
  size: 80,
  snap: "size",
  duration: 5,
  onUpdate: function() {
    console.log(myFilter.size);
  }
});

The onUpdate logging (for debugging) still reveals that the size is set to float values:


Any idea what I could be doing wrong? Or how else to round this to whole numbers?
Thanks!

[Rodrigo]

Hi @trych,

 

You can use the snap method or Math.round() in your update callback and apply that directly to the PIXI filter property. I know it defies the usage of GSAP is the only solution I can think of.

 

Just out of curiosity, which versions of GSAP and PIXI are you using? Which type of filter are you trying to animate? Also please try to provide a minimal demo that we can take a look at in order to see what could be the issue.

 

Happy Tweening!!!

[trych]

54 minutes ago, Rodrigo said:

You can use the snap method or Math.round() in your update callback and apply that directly to the PIXI filter property. I know it defies the usage of GSAP is the only solution I can think of.

How can I get the current interpolated value in my onUpdate callback?

[trych]

Ok, the snapping does not even work on a generic object:
 

let settings = {
  size: 10
};

gsap.to(settings, {
  size: 80,
  snap: "size",
  duration: 5,
  onUpdate: function() {
    console.log(settings.size);
  }
});

This gives me floating point values. Is the snapping plugin maybe broken in more recent releases? I am using v3.11.1

Edit: Sorry, this does indeed work, my specific example was slightly different, see my post below.

As a workaround I could solve this with Math.round() like you suggested.

let settings = {
  size: pixiFilter.size
};

gsap.to(settings, {
  size: 80,
  snap: "size",
  duration: 5,
  onUpdate: function() {
    pixiFilter.size = Math.round(settings.size);
  }
});

Should the non-working snapping be reported as a bug somewhere?
 

[GreenSock]

I'm curious why you think it doesn't work. Aren't you seeing the console.log() snapped here?: 

See the Pen MWGOEPW by GreenSock (@GreenSock) on CodePen

 

If you can provide a minimal demo (like a codepen) with the most basic version of what you're looking for, I'm sure we can fork it and give you some ideas. Perhaps a modifiers: {} object would be of use. 

[trych]

Oh, ok. This does indeed work. Now after investigating, why it didn't work in my case, I realize I actually did this:

let settings = {
  size: pixiFilter.size
};

gsap.to(settings, {
  size: 80,
  snap: "size",
  duration: 5,
  onUpdate: function() {
    console.log(settings.size);
  }
});

And this does not work, because the pixiFilter actually does not return a number but an Array with length of two, like [10, 10]. Since gsap just started happily tweening (starting from the correct size value), I didn't even suspect that it couldn't be a number. Apologies, even though I assumed this simple case would have worked without a minimal demo, I now see I should have posted one ... 😞
 

So, what does gsap actually do in this case? Does it grab the array's first value and uses that for tweening?

And should snap maybe also work in these cases? I mean, as long as gsap starts interpolating, as a user I would expect it to respect any additional settings as well.

[GreenSock]

Yeah, that's a totally invalid way of doing things but what I think is happening is that GSAP was trying to convert that value into a tweenable value (and Array is not a tweenable value, of course), so it was viewing it as a string essentially ("[20, 20]") and picking out the first number it finds in that string. The snap plugin can't work with a complex value, so it wasn't kicking in. 

 

There are many ways to approach this. Here's one: 

See the Pen NWMwwNQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You do know about this, right?: 

https://greensock.com/docs/v3/Plugins/PixiPlugin

[trych]

51 minutes ago, GreenSock said:

GSAP was trying to convert that value into a tweenable value (and Array is not a tweenable value, of course), so it was viewing it as a string essentially ("[20, 20]") and picking out the first number it finds in that string

Ok, that is fairly confusing, if you don't know that that's how it works. I guess in that specific case it would have been more helpful if gsap refused to tween, but I understand why this parsing will be helpful in many cases.

  

46 minutes ago, GreenSock said:

There are many ways to approach this. Here's one: 

Yeah, the confusing part was mainly that the pixi setter worked with a simple number as input.

 

47 minutes ago, GreenSock said:

You do know about this, right?: 

Yes, although I read somewhere else on the forum that this only really works for simple pixi stuff. So I was not expecting it to work on one of pixi's fiter plugins. Might be wrong though.

Anyways, I got it to work now. Thanks a lot for the help and the explanations!