Jump to content
Search Community

Tweening boxShadow with inset = weird behaviour

hamstanim 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



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 :




Is this normal behaviour?


Thank you

Link to comment
Share on other sites

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() {

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


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


Does this help? :)

Link to comment
Share on other sites

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:




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

Link to comment
Share on other sites

  • 4 months later...

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.

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