Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
George Olaru

Border Width Easing

Recommended Posts

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 ?

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

  • Like 3
Link to post
Share on other sites

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" });
  • Like 5
Link to post
Share on other sites

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! :D

 

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

 

Great trick Jamie! :)

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.

×