Border Width Easing

[George Olaru]

I'm trying to ease a border-width animation and not sure if I'm doing something wrong.

TweenLite.to(container, 1, {borderWidth:100, ease:Back.easeInOut});

The animation is running great but linear, without any easing. Is it "ease" featured supported for border width ?

[Jonathan]

Hello George Olaru, Welcome to the GreenSock Forums!

 

You will need to use these border properties, since borderWidth shorthand property is not animatable.. use the following instead:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

https://developer.mozilla.org/en-US/docs/Web/CSS/border

 

[George Olaru]

Seems like it's working with the shorthand syntax too: 

See the Pen Funhr by babbardel (@babbardel) on CodePen.

 

Anyway - not sure why easings are working now

[Jonathan]

Thanks for making the codepen example!

 

Im NOT seeing the borderWidth animating! It is NOT an animatable property.

 

Here is a list of animatable CSS properties, keep in mind that just because a certain property is not in the list does not mean GSAP cant animate it. That is just what the spec dictates:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

 

In codepen you dont need to add a html, head, and body tags.. since the HTML panel is the inner HTML of the body tag.

• You add your JS scripts in the JS panel by clicking the gear icon.
• Then to add jQuery select it from the dropdown.
• Then add the TweenMax.min.js link path in the External JS input field.

I forked your codepen so you can see what i mean.. you can see the borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth animate... and how you add JS scripts to the codepen :

 

Working Example:

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

 

Hope this helps!

[George Olaru]

You're right - sorry for my confusion! Thank you

[Jonathan]

No worries.. Glad to help!

 

Just bookmark this link for what CSS properties are animatable:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

 

and also bookmarking the GSAP Docs for fast referencing:

 

http://api.greensock.com/js/

 

[Rodrigo]

Hi,

 

Another option is tween the box-shadow with no blur and no displacement, and set it as inset in the styles declaration, like this:

 

CSS

#element
{
  position:relative;
  margin:50px;
  width:100px;
  height:100px;
  background:#00f;
  box-shadow:inset 0 0 0 0 rgb(255,255,255);/*shadow grows to the inside*/
}

JS

var element = $("#element"),
    btn1 = $("#btn1"),
    t = TweenLite.to(element, .5, {boxShadow:'0 0 0 20px rgb(255,255,255)', ease:Elastic.easeOut, paused:true});

t.reversed(true);

btn1.click(function()
{
  t.reversed() ? t.play() : t.reverse();
});

You can see it here:

See the Pen cylbC by rhernando (@rhernando) on CodePen.

 

Rodrigo.

[jamiejefferson]

I'd just like to add my piece here:

 

borderWidth is tweenable, and if it isn't working in some browsers, I would suggest this might be something that the CSSPlugin could be looking for and correcting (if possible).

 

See here:

See the Pen oqAEI by jamiejefferson (@jamiejefferson) on CodePen.

 

From this, Firefox and IE won't tween border-width if it is only set in the CSS, however if there is a border-width in the style attribute, then the property tweens as expected. Firefox and IE don't provide a borderWidth value in their window.getComputedStyle(element), only in element.style.borderWidth.

 

 

Also Jonathan, that list of animatable properties at Mozilla you linked is specifically referring to whether CSS animations/transitions will work for those properties, not GSAP. It's a good reference, but its not an exact list of what GSAP can and can't tween.

 

EDIT: Haha I dived into the CSSPlugin and just added the following line amidst all the other registrations:

_registerComplexSpecialProp("borderWidth", {parser:_getEdgeParser("borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth")});

Now borderWidth works everywhere, and even works with complex values e.g.

TweenMax.to(target, 1, { borderWidth: "20px 5px 0 100px" });

[Jonathan]

Hello... Yeah, Jamie I wasn't saying that GSAP can't animate CSS properties that are not in the list, but that you cant animate it natively. Unless, like your example, GSAP can animate the CSS property if it exists and/or is available in the DOM style attribute.  I know GSAP can animate anything!

 

Also, Nice job getting the CSSplugin to parse borderWidth with registerComplexSpecialProp..

 

Great trick Jamie!