CSSPlugin Update Breaks Code

[eliajf]

I upgraded today from v1.14.2 to 1.15.1 and find that the CSSPlugin.js breaks my code. It seems to change my css properties to be a fixed width at the point of animation so changes to that property after the animation has completed no longer obey my css. This is my tween and, as you can see, nothing fancy except animating a class and then showing an element within that section once animated:

TweenLite.to(edit.field, constant.ANIMATION_SHORT_TIMER, {
  className:"+=is-focused", 
  onComplete: function() {
    if ($clear) TweenLite.to($clear, constant.ANIMATION_SHORT_TIMER, {opacity: "1.0"}); 
  }
});

Here is the css with v1.14.2 for edit.field after the animation:

 

border-bottom-color: rgb(235, 171, 8);

border-bottom-style: solid;

border-bottom-width: 1px;

border-left-color: rgb(235, 171, 8);

border-left-style: solid;

border-left-width: 1px;

border-right-color: rgb(235, 171, 8);

border-right-style: solid;

border-right-width: 1px;

border-top-color: rgb(235, 171, 8);

border-top-style: solid;

border-top-width: 1px;

box-sizing: border-box;

color: rgb(0, 0, 0);

cursor: pointer;

display: inline-block;

font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;

font-size: 16px;

font-weight: 300;

height: 55.59375px;

line-height: 44px;

max-width: 100%;

padding-bottom: 4.800000190734863px;

padding-left: 6.400000095367432px;

padding-right: 6.400000095367432px;

padding-top: 4.800000190734863px;

position: relative;

white-space: pre-line;

width: 116.765625px;

word-wrap: break-word;

 

With 1.15:

 

border-bottom-color: rgb(235, 171, 8);

border-bottom-style: solid;

border-bottom-width: 1px;

border-left-color: rgb(235, 171, 8);

border-left-style: solid;

border-left-width: 1px;

border-right-color: rgb(235, 171, 8);

border-right-style: solid;

border-right-width: 1px;

border-top-color: rgb(235, 171, 8);

border-top-style: solid;

border-top-width: 1px;

box-sizing: border-box;

color: rgb(0, 0, 0);

cursor: pointer;

display: inline-block;

font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;

font-size: 16px;

font-weight: 300;

height: 55.59375px;

line-height: 44px;

max-width: 100%;

padding-bottom: 4.800000190734863px;

padding-left: 6.400000095367432px;

padding-right: 6.400000095367432px;

padding-top: 4.800000190734863px;

position: relative;

white-space: pre-line;

width: 90.078125px;

word-wrap: break-word;

 

Notice how CSSPlugin added a display:inline-block; line (bold and italicized above) to the CSS that wasn't there with version 1.14.

 

I hope this helps. 

[Carl]

Hi Eliajf,

 

Sorry to hear you are having problems.

 

It would really help if you could post a very simple demo that we can test as explained here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

It looks like the class you are tweening has 30 properties, it would really help if the demo is simplified and only contains enough properties to replicate the problem.

 

Also, it appears to me that display:inline-block is ALSO set in the code you show as 1.14.2 http://prntscr.com/62g12f, so my guess is that something else might be going on. Again, I'm sure a basic demo will help a lot.

 

 

Thanks

[GreenSock]

Yep, I echo Carl's request. I can't imagine how CSSPlugin could randomly add properties like that - look at the source code and you'll see that there's not a single mention of "inline-block" anywhere. It'll definitely help to see a reduced test case. I'm sure we can get it figured out once we see it.  

[eliajf]

I looked through that list 10 times and didn't see inline-block. Of course, you saw it in two seconds. I'll see if I can put something together for a demo when I get my head above water. At the moment I'm using the older CSSPlugin so I can ship, since everything worked fine with it (and still does).

[eliajf]

Okay, I had some time this morning to simplify the demo and post to Codepen:

 

See the Pen wByeKN by eliajf (@eliajf) on CodePen

 

Select any row then select a key (7, 8 or 9). See how the field doesn't expand to accommodate the extra character appended to the end. Now, comment out the two TweenLite calls and uncomment the two lines below that and try again. Notice it works correctly now.

 

Hope that helps you track down the bug.

[GreenSock]

Yes, thanks for pointing that out. And sorry about the hassle. I have attached a preview copy of GSAP 1.15.2 (not released yet). This should resolve the issue. Would you mind double-checking and letting us know? 

GSAP_1.15.2_preview1.zip

[eliajf]

That seems to fix it. Thanks. Do we get notified (emailed) when a new version is released?

[GreenSock]

Yep, we generally blast an email out when we post a new version.