Jump to content
Search Community

tween drop-shadow?

erikb 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

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

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...