BoxShadow Inset not turning off

[Gary]

Setting a shadow with inset works correctly, but then setting it without changes everything but doesn't clear the inset.

 

The codepen is a very simple example.  I know clearProps could be used in this example, but is not ideal for my actual use case with multiple user-supplied shadows.  Any thoughts how to toggle inset on/off?

See the Pen raJZvK by GaryC (@GaryC) on CodePen

[pixeldroid]

$("#shadow2").on("click", function() {

  tl.to(".target", 1, {boxShadow: "none"});

 

or

 

$("#shadow2").on("click", function() {

  tl.to(".target", 1, {boxShadow: "0px 0px 0px 0px blue"});

[OSUblake]

I don't know of a good way without keeping your inset shadows on a separate element. I can get the inset shadow to animate 1 time, but after that it acts like a set tween.

 

See the Pen dPdQKe by osublake (@osublake) on CodePen

[Jonathan]

There is this that basically just set the color to transparent and then clearProps on the inline style box-shadow.

 

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

:

var clicked = 0
$(document).on("click", "#shadow1", function() {
  if(clicked == 0){
       var tl = new TimelineLite();
       tl.to(".target", 1, {
         boxShadow: "10px 10px 20px 20px inset black"
       });
       clicked = 1;
  } else if(clicked == 1){
       var tl = new TimelineLite();
       tl.to(".target", 1, {
         boxShadow: "10px 10px 20px 20px inset transparent",
         clearProps:"boxShadow"
       });
       clicked = 0;
  }
  return false;
});

:

This could have also been done without a Timeline.

 

MDN box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

 

Is this what you were looking to do?

[Gary]

Thanks for the help.  I'm aware of how to resolve the basic example in the codepen using techniques like you suggest, but thanks for the suggestions.

 

I'm pointing out what I think is a bug in the GSAP library.

 

Using the codepen I gave try doing these things in order:

 

Click the Shadow 2 button. The shadow will animate in as expected (bottom-left, blue, not inset)

 

Then click the Shadow 1 button.  The shadow switches to inset and animates in as expected.

 

Then click the Shadow 2 button again.  It animates back to the bottom-left blue but does not switch to not-inset.

 

However, I think the internal state does think that it is not-inset but didn't render it to the css.  I think that because if you then click the Shadow 1 button again, it animates not-inset and then pops to inset at the end of the tween.

[Gary]

Oh, and I meant to say this:  I know that inset can't tween.  It will pop to the new value like if you try to tween a font-family or text-decoration.  I use to() instead of set() because the user may or may not have used inset and I want the other shadow values to animate nicely if they haven't toggled inset.  It seems that the inset "popping" doesn't work correctly though.  Does that make sense?

 

My user might set zero or more shadows in any configuration, with or wthout inset.  I just pass them into gsap.

[Jonathan]

Ok i see the behavior now Gary..

 

Is this what you wanted to do then .. explicitly calling none  for boxShadow  (for non inset). And using set() clearProps boxShadow  as part of your timeline:

 

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

:

var tl = new TimelineLite();

$("#shadow1").on("click", function() {
  tl.set(".target", {clearProps:"boxShadow"});
  tl.to(".target", 1, {boxShadow: "inset 10px 10px 20px 20px black"});
});

$("#shadow2").on("click", function() {
  tl.set(".target", {clearProps:"boxShadow"});
  tl.to(".target", 1, {boxShadow: "none -10px 10px 0px 0px blue"});
});

:

Let us know if that helps!

[Gary]

Hi Jonathan,

 

Thanks for the response!  Yep, clearProps definitely avoids the issue.  I'll petition to get it changed in the library so clearProps isn't needed.  

 

Thanks,

Gary