Possible Bug: Inconsistent 'clearProps' behaviour

[Tom B. @ Wix]

I stumbled upon a weird behaviour of clearProps, and couldn't find any reference to whether it is a bug or not.

 

When using clearProps with explicit values the order of the parameters passed has importance when clearing mixed transforms/properties values.

 

This will clear x and y and skip opacity - 

clearProps:'x, y, opacity' 

This will clear only "opacity" and skip x and y.

clearProps: 'opacity, x, y'

Same goes with other non transform values like "clip"

 

See the codepen for clearer example.

See the Pen ufphl by tombigel (@tombigel) on CodePen.

Edited September 28, 2014 by Tom B.

[Diaco]

Hi Tom B. 

 

seems there is a little issue , pls remove any blank space between " , " and " property names " and that'ill work .

 

Bad = clearProps:'x  , y,  opacity' 

 

Good = clearProps:'x,y,opacity' 

 

sometimes the blank space 'ill avoid to clear next property ! 

[Tom B. @ Wix]

oh... this is a bit stupid.

[jamiejefferson]

Also be aware that clearProps is intended for cleaning up the inline styles used by GSAP, and not necessarily resetting individual values, so clearing x or y actually clears the entire transform style. This is why you're seeing it work for both x and y without opacity in the first example. Only the x was being parsed but that was clearing the whole transform anyway.

TweenLite.to("#foo", 2, { x:100, y:200, clearProps:"x" })
// clears the transform style, resetting both x and y transforms

The docs do mention that clearProps is "a comma-delimited list" but I suppose that doesn't clarify that extra white space won't be trimmed.

[GreenSock]

I'll add code to remove the spaces in the next release. I hadn't thought it necessary before, but obviously I miscalculated the user-friendliness of that, and my hyper-focus on file size and performance got the better of me