TweenMax.set blur with decimal values

[maguskrool]

Hello. I'm trying to animate the filter: blur() css property of an image. I've had some degree of success using an adapted version of a solution I found on another topic (referenced at the bottom of the post).

 

My solution:

 

See the Pen rvgLEP by maguskrool (@maguskrool) on CodePen.

 

However, this method works best for large blur values, coupled with a somewhat short animation duration. I want to have a lower maximum blur value. In my example, I'm trying to animate the blur from 0 to 6px. If you see my codepen, the animation staggers, the values are increased one by one, as integers. At first I thought maybe blur() doesn't accept decimal values, but that is not the case. See here a simple test with blur increasing by 0.25px with each step:

 

See the Pen JvqKVg by maguskrool (@maguskrool) on CodePen.

 

In the animation codepen, the variable tlp (timeline progress) is indeed a decimal number, but when TweenMax.set uses it to set the value for blur(), I guess it discards the decimal part? How can I avoid this?

 

Thank you.

 

Original codepen from where I based my solution:

 

See the Pen PEgdop by jonathan (@jonathan) on CodePen.

 

 

 

[Carl]

hmm, it appears to be an optimization built into the browser.

I simplified your demo quite a bit to make use of GSAP's advanced tweening of complex strings.

 

It appears the browser is only allowing integers to be set. I'm not sure there is a valid work-around.

 

See the Pen JvqboN by GreenSock (@GreenSock) on CodePen.

 

[OSUblake]

CSSPlugin rounds values.

 

TweenMax.to("#logo-home", 4, {
  filter: "blur(6px)",
  autoRound: false
});

 

 

See the Pen deEKVm by osublake (@osublake) on CodePen.

 

[Carl]

Thanks, Blake. That's good to know!

[Jonathan]

Ha.. @OSUblake beat me to it, I was gonna suggest the same thing to do with autoRound and without an onUpdate. @maguskrool That codepen you forked from me was made several years ago when CSS Filters were not supported consistently cross browser. But since then browser support has increased and there is really no need to animate CSS filters with an onUpdate anymore. Plus GSAP supports animating CSS Filters without it now.

 

CSSPlugin Docs:

 

autoRound: https://greensock.com/docs/Plugins/CSSPlugin#autoRound

 

Happy Tweening

[maguskrool]

Thank you all so much!

 

I'm very new to Greensock and css animations in general, so I wasn't aware there was such a simple solution, comparing to the onUpdate method. Also, very useful to know about autoRound.

 

Thank you!