ColorPropsPlugin Bug

[OSUblake 9,990 Likes (Superhero)]

I always get NaN for the alpha value when using the parseColor method for hsla.

 

ColorPropsPlugin.parseColor("hsla(100,50%,50%,1)") // => [106, 191, 64, NaN]

 

Check the console.

See the Pen b3287bb7fb7608f65d17f8823ce47988?editors=0010 by osublake (@osublake) on CodePen

 

 

Another question. What does the colorStringFilter method do, and how to use it?

[GreenSock 8,117 Likes (Superhero)]

Great catch, Blake! There was a one-letter typo  Should be fixed in the upcoming release. There's the same method on CSSPlugin as well, so here's an updated TweenMax with that: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

The colorStringFilter() isn't generally intended for public use (which is why it's undocumented, but I exposed it on purpose as a static method just in case it came in handy down the road for someone and I could be like "just use this method..."), but it basically lets you pass in a 2-element array with a starting string and an ending string, and it'll search both of them for colors and harmonize their formatting (rgba() unless there's one that's hsl-based, in which case it'll switch to hsla()). That's useful for the core engine because the "animate any string" stuff taps into that. Otherwise, colors inside the strings like "red" or "#F00" or "#FF0000" wouldn't map to numbers that can be tweened.

 

Make sense? 

 

If you're asking because you're working on the TypeScript definitions, I'm inclined to leave that colorStringFilter() undocumented. Feel free to push back if you think it's important to have in there. 

[OSUblake 9,990 Likes (Superhero)]

Gotcha. I was wondering about the string filter more out of curiosity. I saw in the source that it was being added to TweenLite, and had never noticed that before.

if (!TweenLite.defaultStringFilter) {
  TweenLite.defaultStringFilter = ColorPropsPlugin.colorStringFilter;
}

 

[GreenSock 8,117 Likes (Superhero)]

Yep, that's because the color parsing is kinda heavy and doesn't need to be in TweenLite by default. But if CSSPlugin or ColorPropsPlugin is loaded, it should automagically add that capability to the core