Jump to content
Search Community

TweenMax.set blur with decimal values

maguskrool test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

 

 

Link to comment
Share on other sites

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 :)

  • Like 3
Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...