[TweenMax.set blur with decimal values]

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!

[TweenMax.set blur with decimal values]

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