Tweening boxShadow with inset = weird behaviour

[hamstanim]

Hello,

 

I was trying to animate an inset boxShadow on an element and I saw something weird.

If the element has an inset boxShadow and I tween to another inset boxShadow, the border goes outside the element.

It works ok if I remove the inset on the Tween command.

 

Example :

 

http://plnkr.co/edit/x7OoyDcVdod2DQjB6HzP?p=preview

 

Is this normal behaviour?

 

Thank you

[Jonathan]

Hello hamstanim, and Welcome to the GreenSock Forum!

 

Here is an example of playing a boxShadow  animation and reversing the boxShadow  animation:

 

See the Pen zxWGRg by jonathan (@jonathan) on CodePen

:

var tl = new TimelineLite({paused:true});
tl.set(".target", {clearProps:"boxShadow"});
tl.to(".target", 1, {boxShadow: "inset 0 0 0 50px red"});

$(document).on("click", "#shadow1", function() {
  tl.play();
});

$(document).on("click", "#shadow2", function() {
  tl.reverse();
});

:

This could have also been done with one button so you could toggle the animation on and off with one button.

 

Does this help?

[hamstanim]

Thank you for your answer!

 

But I was mostly wondering why gsap behaved that way.

I set the box shadow in css because I needed an initial value, before even gsap is loaded

[Jonathan]

That looks like an ongoing browser bug. 

 

If you use the GSAP set() method to apply your box-shadow, the issue gets resolved. I would always let GSAP handle the cross browser setting of any property you are animating.

 

Here is an example that uses the GSAP set() method to set the initial boxShadow.

 

I modified and forked your example:

 

http://plnkr.co/edit/jZ3Eg3JnLJf74Yt6mYg7?p=preview

 

GSAP set() : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/set/

 

 I don't think this to be a GSAP bug, since using GSAP to set() the initial boxShadow property solves the issue. But I will let the GreenSock Administrators know about this. Please standby

[frikki]

An important thing regarding box-shadow tweens is to apply units. For example,

box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14)

instead of

box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14)

Forgetting units will cause big headaches when your tween doesn’t work, but just makes a strange jump to the end tween state after elapsed duration.