How can i add a border with a tween

[irvy]

I tried to add a border to a banner Ive made, but none of the tries worked

i tried

.to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"})

I tried with an inset and i get the same effect but I dont want it to be transparent.

.to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) 

I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. 

 

Here is my codepen 

See the Pen KWGNJo?editors=1010 by IrvingG (@IrvingG) on CodePen.

[irvy]

[ohem]

You can tween the border width like this: 

See the Pen NpOgJe%C2%A0 by anon (@anon) on CodePen.

 

It may not work across all browsers though, so you can tween the borderTopWidth, borderRightWidth, borderBottomWidth, and borderLeftWidth properties individually for cross browser support.  Example from Jonathan: 

See the Pen vapGt by jonathan (@jonathan) on CodePen.

 

Same thing works for borderRightColor, borderTopColor, etc.

 

Check out this thread for more information: https://greensock.com/forums/topic/8880-border-width-easing/