Jump to content

Search the Community

Showing results for tags 'color'.

  • 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


  • FAQ


  • Examples
  • Showcase


  • Products
  • Plugins


  • Learning Center
  • Blog


  • ScrollTrigger Demos


  • CodePen Challenges

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 18 results

  1. 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. SpriteLab

    Hue value

    Hi. If I set the hue of a clear red square like this: var tl = new TimelineMax(); tl.to(this.square, 1, {easel:{hue:65}}) It turns brown(ish) If I create a #FF0000 square in Adobe Fireworks and set its hue to 65, it turns yellow. Do I miss something in the setting in the script? I think it's hard to find a doc of all settings for the easel. Thanks in advance John
  3. Hi, As the title says, just before starting the tween the background colour flashes to white. Only on Firefox. I've tried to '.set' and also '.fromTo' to 'force' the starting colour of the background but no avail. Browser: Firefox 55.0.3 (64-bit) Os: OsX 10.11.6 Device: MacBook Pro (Retina, 13-inch, Early 2015) Thank you
  4. Hi! I'm trying to figure out how to change the color of these waves to gradients rather than solids. Is there a simple way to achieve this? Thanks! Nick
  5. Hey everyone! Long-time user and fan of TweenMax, et al for Flash. I'm building my first real project in Canvas and am using the CreateJS plugin for Flash as my asset layout manager. I'm trying to change the color of a hotspot on onmouseover: To cover all bases: I've included the EaselPlugin.min.js file. Here are all the GSAP files included: <script type="text/javascript" src="libs/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="libs/plugins/EaselPlugin.min.js"></script> <script type="text/javascript" src="libs/easing/EasePack.min.js"></script> <script type="text/javascript" src="libs/TweenMax.min.js"></script> The object I'm trying to tween doesn't seem to respond to this code: TweenMax.to(e.target, .3, {easel:{tint:0x00FF00}}); I know e.target is correct because I can apply GSAP transforms on it like so: TweenMax.to(e.target, .3, {scaleX:2, scaleY:2}); and it works fine. Also, I'm getting this error when I try: easel:{tint:0x00FF00} uncaught exception: EaselPlugin error: The EaselJS ColorFilter Javascript file wasn't loaded. Maybe I'm missing something small? Also, just to be sure, I can't use CSS properties on elements that are not part of the DOM right? Like this object I'm trying to tint. Any help is greatly appreciated!
  6. Hello... Been dev'ing in Flash for years and using the greensock library extensively, however I want to port some projects over to html5 using EaselJS/CreateJS and, as this is new territory for me, I'm running into some hurdles with color transformations. One aspect I need to port is a color transform of an animation. So my animation is now exported as a spritesheet and I'm trying to find a way to perform a color change of the animation as it plays. (think of a bottle of water where the water changes color as it fills in the bottle) The lack of info I've been able to find would imply that it's not as easy as it sounds (and certainly not as easy as in Flash with TweenMax). Any ideas on how to approach this....?
  7. 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.
  8. I've got some Flash animations to convert to HTML. Since I have Adobe Edge as part of the CC subscription, I thought I'd give it a go. After a lot of head-scratching and teeth-gnashing over the syntax, I more or less have the basic stuff figured out. I think GSAP is far simpler to use than the Timeline-based "point 'n click" method. What I can't seem to address is how to use GSAP to change the color of a Symbol in Edge. The CSS for backgroundColor doesn't do anything - see the following code snippet - the rotation and opacity changes occur on hover, but the color of the object does not change. // insert code to be run when the mouse hovers over the object var element = sym.$("Sphere"); TweenMax.to (element, 2, { css:{backGroundColor: "#FF9933", rotation:135, opacity:.5}, ease:Elastic.easeOut}); Stupid syntax error, but I can't seem to see it. TIA for your help!
  9. I am trying to color some text within SplitText, but it doesn't get red (rood). Is it SplitText or just me again.
  10. Hi i have a question maybe it's simple but maybe not I would like animate a color of canvas shape but i don't understand how in my draw ctx i have this line ctx.fillStyle = colorLogo; colorLogo it's my variable var colorLogo = "rgb(65, 190, 238)"; but with css in tweeMax i don't understand how i have to proceed can you help me ? i have to create a function animate ? Thanks
  11. Is there a known issue of the ColorMatrixFilter plugin not working in the Safari browser? I am using the plugin to colorize two images, and it works in both Firefox and Chrome, but not Safari.
  12. 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();
  13. Hello, Once again here i am asking for help. I'm trying to add the Colorpicker component to the list of ignored objects in the TransfromManager. I read some post on the forum, and Jack suggest to set the autoDeselect property to false, and add a background sprite that handles the deselect click. However, in the current state of my project doing that would involve a LOT of changes and i'm actually tacking advantage of the autoDeselect property. Is there another way i can add the color picker to the ignore objects? Thank you very much.
  14. Hi, I'm a newbie so maybe this is dumb question. I like to animate the color of links, something like: new TweenLite(myMenu, 1, {css:{a:linkColor:"#FFF"}}), But I can't find the property for a:link or a:visited. Is there cheatsheet for all CSS properties that GreenSock can animate. thanks, Ivo
  15. Hi guys, I'm trying to build a 2 way tween (in 4 quadrants) using TweenLite with the colorTransform plugin. I'm doing this on a stage with a mouse move listener, so for example: stage.addEventListener(MouseEvent.MOUSE_MOVE, mve) function mve(evt:Event):void{ var percY = (stage.mouseY / stage.height).toFixed(2) TweenLite.to(mc, 1, {colorTransform:{tint:0xff0000, tintAmount:percY}}); } This works fine in 1 direction (top and bottom), but I want it to work 4 ways - have a look at screenshot which hopefully explains it better.. As you move towards each corner, top left, top right, bottom left, bottom right - the color should tween to that target (i.e. 100% or 0% of stage in both directions) I hope this question makes sense, any help would be appreciated, a little bit of an AS3 newb. Cheers
  16. As a Flash Developer coming into Canvas, I'm loving GSAP. But I was amazed how slow it was just tweening the color of a EaselJS object. Experiment tweening alpha and scale: http://antoniobrandao.com/canvas/ Experiment like the above, but also tweening the "tint" of an easelJS Shape http://antoniobranda...vas/index2.html It completely destroys it!!! Am I doing it wrong or is this just slow? Check the source code in the experiments. Any help appreciated!
  17. Hello, I'm using the applySettingXml method to configure the TransformManager from an external file. Everything work fine, but I don't know in which format the colors for the handle and the line are described. For example, to which color will translate a value of "16777215" for the handleColor? Thank you.
  18. So I need to just tween a color property of a Starling Display Object, but can't figure a way to do it with multiple objects. Right now, I have it working, but it only works on one TweenMax at a time as I need to assign it to a variable in order to get the current progress. Is there a way I could modify the TweenMax.to() function to get it to tween hex numbers correctly? onUpdate: tweenColorUpdate, onUpdateParams: [b, b.color, 0xB2B2B2] private function tweenColorUpdate(b:BlueCube, fromColor:Number, toColor:Number):void { b.color = DataModel.interpolateColor(fromColor, toColor, cubeColorTweenMax.currentProgress); } public static function interpolateColor(fromColor:uint, toColor:uint, progress:Number):uint { var q:Number = 1-progress; var fromA:uint = (fromColor >> 24) & 0xFF; var fromR:uint = (fromColor >> 16) & 0xFF; var fromG:uint = (fromColor >> 8) & 0xFF; var fromB:uint = fromColor & 0xFF; var toA:uint = (toColor >> 24) & 0xFF; var toR:uint = (toColor >> 16) & 0xFF; var toG:uint = (toColor >> 8) & 0xFF; var toB:uint = toColor & 0xFF; var resultA:uint = fromA*q + toA*progress; var resultR:uint = fromR*q + toR*progress; var resultG:uint = fromG*q + toG*progress; var resultB:uint = fromB*q + toB*progress; var resultColor:uint = resultA << 24 | resultR << 16 | resultG << 8 | resultB; return resultColor; }