set fill: 'url()' is changed to fill: rgb()

[fregante]

I think GSAP is assuming fill is always a color and is trying to parse it, while attr doesn't parse it and thus works correctly

https://codepen.io/bfred-it/pen/RMjLKv

[jackdoyle]

Ah yes, this seems like a rather extreme edge case. Thanks for pointing it out though. Keep in mind that:

• set() is just a zero-duration tween and must record starting and ending values and interpolation (after all, you could change the duration() to something other than 0 and it should work).
• It's impossible to tween from a color to a pattern (url()) like that. So this really doesn't seem like something that GSAP should be expected to handle (I'd recommend simply setting the value directly yourself, like element.style.fill = "url(...)" instead of doing a TweenLite.set() call.
• Internally, CSSPlugin was testing the initial value to see if it's a color (and in your case, it was) and that kicked it into color-parsing mode. attr:{}, on the other hand, was just treating it as a raw string.

So again, in this case I'd recommend simply setting the value directly. For the 2.x release, I'll look for ways to better accommodate simple set() calls like this. Like perhaps a quickSet() that is NOT a tween instance and is solely meant to immediately change values without recording anything or concerning itself with interpolation. Fair enough?

[fregante]

That probably sounds good. The problem with raw DOM API calls is that they’re not as easy to add in a reversable timeline

[jackdoyle]

True, though you could just add a call() in the timeline that'll do it, and maybe another that's SUPER close to it, like 0.00001 seconds before it that sets it to the initial value. There are other ways to do this too - let me know if you need any help. I know you're an advanced user, so you're probably already aware of several options.

[fregante]

I’ll stick to attr for now, I don’t want to set multiple function calls to set/unset it when GSAP can take care of it via AttrPlugin 🙂