Jump to content


ColorPropsPlugin Bug

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

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.



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

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 4
Link to comment
Share on other sites

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;


Link to comment
Share on other sites

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

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