Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'hsl'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 5 results

  1. GreenSock


    Note: This plugin was removed from GSAP 3. Please see the GSAP 3 release notes for details. Tweens any color-related property of any object, like myObject.borderColor from "rgb(255,0,51)" to "rgb(102,204,0)" (and you can define the initial color in almost any format like "#FF00CC" or "rgba(255,0,51,0.5)" or "red" or "#f0c" or 0xFF00CC or "hsl(105,50%,80%)"). New values are always set in the format "rgb(...)" (or rgba(...) for values that include alpha). You can tween an unlimited number of color properties simultaneously. Just use the associated property name inside the colorProps:{} object like this: //tweens myObject.borderColor and myObject.myCustomProp TweenLite.to(myObject, 1, {colorProps:{borderColor:"red", myCustomProp:"rgb(204,51,0)"}, ease:Linear.easeNone}); ColorPropsPlugin is NOT generally intended to be used with css-related color properties because the CSSPlugin already handles those. ColorPropsPlugin is meant to tween other color-related properties directly on your JavaScript object(s). To learn more read the ColorPropsPlugin documentation.
  2. Hi I'm trying to tween between colours but it's not quite what I expected (code below) - it seems to fade from one colour to the next rather than animate through all the colours in between. I think this is because it's doing it in rgb, I want to tween between hues in hsl colours so for example from hsl(0, 100%, 50%) to hsl(120, 100%, 50%). I've tried to get hsl to work in the TweenLite.to() function but am unclear how this works, how is hsl used in the function? Will using hsl tweening through hues 0 -> 120 or also just fade from one to the next? //colours var colours = { 0: new THREE.MeshPhongMaterial({ color: "hsl(120, 100%, 50%)" }), 1: new THREE.MeshPhongMaterial({ color: "hsl(200, 100%, 50%)" }), 2: new THREE.MeshPhongMaterial({ color: "hsl(240, 100%, 50%)" }), 3: new THREE.MeshPhongMaterial({ color: "hsl(360, 100%, 50%)" }) } //animate to next colour colourTo(colourplane, colours[0], 5); //colour tween function colourTo(target, value, speed) { var initial = new THREE.Color(target.material.color.getHex()); var value = new THREE.Color(value.color.getHex()); //tween colour TweenLite.to(initial, speed, { r: value.r, g: value.g, b: value.b, onUpdate: function () { target.material.color = initial; } }
  3. I have an SVG that has a ton of paths in it with various colors. I'd like to loop through all the paths and apply a brightness adjustment on the fill color. If I could convert the Hex to HSL, then I could tween the brightness separately. Obviously I can write a function to handle this, but it poses the question, is there something already available via TweenMax to do this? Side note, it would be really cool if there was something like this for colors: TweenMax.to(myObject,.5,{lightness:50}); Behind the scenes, Greensock would break the current color into HSL. Tween the lightness. then recombine it back.
  4. ElliotGeno

    Color Utils

    I see you automatically switch strings to RGBa... Is there some sort of Color Utils we can tap into so we don't have to roll our own. For instance, converting hex to RGB component colors. RGB components to HSL, HSL to RGB, RGB to hex is something I typically do to rotate the hue of a color. But rather than including additional code to handle that, I was curious if they were already built in and exposed for us to use.
  5. Cefn

    Tweening HSL color

    Hi all. GSAP is a great framework, really enjoying using it. However I'm struggling to get Hue tweening using HSL within the Color plugin (via CSS automatic binding). A terse attempt to set a background box which tweens its color slowly through the color wheel is as below, but no change seems to happen. TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); TweenMax.to(".wash",60,{backgroundColor:"hsl(+360_cw,50%,50%)",repeat:-1,yoyo:true,ease:Linear.easeNone}); If I remove the 'set' line, then there are some tweened changes to color, (visible in real time within Chrome when the element is selected) but they don't seem to visit the whole 360 degrees of the color wheel. Can anyone help tell me how this is meant to be specified or is a bug/missing feature with respect to degrees in HSL? For now I have the following kludge in place, but I don't like it much as I think something like the simpler syntax should work... TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); var washTl = new TimelineLite(); washTl.to(".wash",10,{backgroundColor:"hsl(120,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(240,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(360,50%,50%)",ease:Linear.easeNone}); washTl.yoyo = true; washTl.repeat = -1; washTl.play();