Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

tween drop-shadow?

Recommended Posts

Is there an example of how to use GreenSock to tween the values of css drop-shadow?

Is the way to do it to tween the specific values I want to modify in an object and update the String onUpdate?


Here is a link comparing drop-shadow to box-shadow:


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

Link to comment
Share on other sites

I'm not too sure about being to able to animate this. 


I tried countless combinations of strings and objects, and the result was always the same. It would only render the shadow using whole numbers, so the animation jumps. 6px - 5px - 4px - etc...

See the Pen d2e5e8a0c5b3b23db54ff2ab517abc61?editors=0010 by osublake (@osublake) on CodePen


Ok. So maybe that is just a quirk with CSS. I then tried tweening the SVG filter directly... same result. The offset values are still being rounded.

See the Pen 86043284cf05140e0d2e0a14c5848eae?editors=0010 by osublake (@osublake) on CodePen


Maybe somebody else can show me the proper way to do this, because I don't get it.

Link to comment
Share on other sites

What happens if you guys add autoRound: false to your tween ..


Here is Blake's codepen from above forked to use autoRound:false


See the Pen b11e3d4129272bc353e05e4dc1e01fd0?editors=0010 by jonathan (@jonathan) on CodePen


It will animate on a sub-pixel level. But i"m not sure if that is being reflected in how webkit is rendering it, but it is using sub-pixel number values.


Do you guys see GSAP changing the value on a sub-pixel level?



Link to comment
Share on other sites

Yeah, that's what I was trying to figure out yesterday. I was able to see sub-pixel showing up in the console, but it was still being rendered like an integer, even on the SVG filter attribute.

Link to comment
Share on other sites

I would have to agree with Diaco.. drop shadow isn't ready for prime time. But box-shadow has more support and animates smoother than churning butter


Even text-shadow animates smooth, but is better for text:


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



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.