Jump to content
GreenSock

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

BoxShadow Inset not turning off

Recommended Posts

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

Link to post
Share on other sites
$("#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"});

Link to post
Share on other sites

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

Link to post
Share on other sites

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? :)

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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!

Link to post
Share on other sites

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

Link to post
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.

×