tween drop-shadow?

[erikb 28 Likes (Newbie)]

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:

http://thenewcode.com/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

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

[OSUblake 18,474 Likes (Superhero)]

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.

[Jonathan 5,389 Likes (Superhero)]

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?

 

[OSUblake 18,474 Likes (Superhero)]

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.

[Diaco 1,995 Likes (Superhero)]

Hi guys

 

i think it's really good thing that browsers render drop-shadow in this way , it can really impact browsers performance . maybe that's better to try something like this tricky way : http://tobiasahlin.com/blog/how-to-animate-box-shadow/

[Jonathan 5,389 Likes (Superhero)]

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