hsla and timelineMax

[BradLee]

Hey all,

 

 

I have a tween that goes from 1 color to another. It works fine when using hex values but when using hsla values the color will first go  brighter, then tween to the desired colour. Does anyone know why this is, work around?

[ZachSaucier]

Hello BradLee and welcome,

 

Could you please provide a minimal CodePen demo so that we can see exactly what you're talking about?

[BradLee]

sure, here you go..

 

See the Pen xVpBjx by BradLee (@BradLee) on CodePen

[Jonathan]

Hello BradLee, and welcome to the GreenSock forum!

 

It looks like your JS syntax is wrong.. For some reason you are using an accented apostrophe, instead of a straight quote or quotes for your fill hsla color

 

Animating HSLA really depends on what you will be animating. Usually you would just leave saturation and lightness at the value you want.. for example either 0% or 100%. And then you would just tween hue.

 

You can take a look at tweening hsla values in this video

 

http://greensock.com/gsap-1-18-0

 

 

[OSUblake]

Those back-ticks are valid... and really useful!
https://developers.google.com/web/updates/2015/01/ES6-Template-Strings
 
The brightness you see is caused by an old engineering problem. RGB color values actually represent the square root of the displayed color, not the color itself. Your monitor squares all the color values before displaying it. To fix the problem, you need to square the values before mixing them. Confusing? Watch the video.

 

 

Demo...

See the Pen ZbPMjp by osublake (@osublake) on CodePen

[Jonathan]

But i would stick to straight quotes just for backwards compatibility, even if they are now allowed in ES6.

 

Better to be safe than sorry for all users browsers! For example.. Safari 6.1 and 7.1 don't support template literals:

 

https://kangax.github.io/compat-table/es6/

 

[OSUblake]

Yup. So that's where a compiler like Babel comes in. Click on the ViewCompiled button in the JS section of my demo.

// Turns this...
backgroundColor: `rgb(${color1})`

// ...into this
backgroundColor: 'rgb(' + color1 + ')'

[Jonathan]

i like babel .. im just too lazy or need more time to learn it

[OSUblake]

There's really not a lot you need to know about Babel. Just write future JS code, and it will create a compiled version with compatible code. The hardest part is setting it up if you're not familiar with node.
 
A good way to get started with it is by using Google's Web Starter Kit. It also comes with a lot of nice little goodies like live reloading, asset/image optimization, and service worker pre-caching.
https://github.com/google/web-starter-kit
 
You first need to install node. @Dipscom wrote some pretty good instructions for his zipping tool.
http://greensock.com/forums/topic/14098-anyone-got-a-batch-process-for-zipping-their-assets/?p=59727
 
...but left out installing gulp

$ npm install --global gulp

Windows users should also install git and upgrade to npm 3.
https://git-scm.com/
https://github.com/felixrieseberg/npm-windows-upgrade

[BradLee]

the issue was trying to tween a 'hsl' & 'a' at the same time. Instead of using a hsla color I used a hsl colour and tween the opacity separately, fixed the issue.

[Jonathan]

Hello BradLee,

 

You might get better consistent results with RGBA since HSLA or HSL will be converted to RGBA or RGB by the browser when computed.

 

HSL or HSLA will always give inconsistent results due to the CSS Color Module spec only supporting transitioning via (RGB) red, green, and blue components.

 

So it always converts the given color space to RGB or RGBA when animating color spaces. See the CSS animation property types:

 

http://www.w3.org/TR...property-types-

• color: interpolated via red, green, blue and alpha components (treating each as a number, see below). The interpolation is done between premultiplied colors (that is, colors for which the red, green, and blue components specified have been multiplied by the alpha).

The browser will always end up with a RGB or RGBA value. Even in the computed value!

 

The only time i have seen the computed inherited remain as the HSL or HSLA value, is when i set the property through my style sheet and use a CSS transition. But still the final computed value ends up as an RGB or RGBA value.  But the original inherited value of the color on the element through the style sheet is the HSL or HSLA value.

 

But the end result value in the browser is always RGB or RGBA.

 

Computed:

fill rgba(0,​ 0,​ 0)
@element.style hsl(0,​ 0%,​ 0%)

 

[BradLee]

Jonathan, great call, your spot on.