Jump to content
Search Community

Border Width Easing

George Olaru 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

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

  • Like 1
Link to comment
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 comment
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 comment
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 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...