Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
eliajf

CSSPlugin Update Breaks Code

Recommended Posts

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. 
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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.
×