Changing text color with Hue effect?

[ajnglagla 4 Likes (Newbie)]

Hello,

 

I want to make a simple changing color text with hue effect / animation. (Green to red, red to yellow, yellow to blue etc..)

Is this possible in GSAP?

 

Cuz My code is giving this error. Only TweenMax.min.js included in my site, no other plugin. Do I need another plugin to do that?

 

ReferenceError: assignment to undeclared variable color

  color = {h:0, s:50, l:50};

 

See the Pen pyVqGq by ajnglagla (@ajnglagla) on CodePen

[CraigWheatley 49 Likes (Newbie)]

Hi there!

 

You were just setting the jQuery css properties wrong, this line:

$(".change").style.backgroundColor = "hsl(" + color.h + "," + color.s + "%," + color.l + "%)";

Is now:

$(".change").css({
    backgroundColor: "hsl(" + color.h + "," + color.s + "%," + color.l + "%)"
});

See this codepen for the change:

See the Pen eZrxJY by craigster1991 (@craigster1991) on CodePen

 

Take a look here for the jQuery CSS docs:

http://api.jquery.com/css/

[Jonathan 5,176 Likes (Superhero)]

Hello ajnglagla and welcome to the GreenSock Forum.

 

Nice CraigWheatley, But I would take it a step further and use GSAP to set your CSS properties instead of jQuery css() method.

 

GSAP set() method Docs: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

• [static] Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.

TweenMax.set( target:Object, vars:Object )

This way GSAP can keep track of those CSS values your changing outside itself. And GSAP will also add any needed vendor prefixes depending on the CSS property. Since GSAP can help make your CSS cross browser compatible.

 

Example using GSAP set() instead of jQuery css():

 

See the Pen YqLBNE by jonathan (@jonathan) on CodePen

 

So you would change this:

$(".change").css({
    backgroundColor: "hsl(" + color.h + "," + color.s + "%," + color.l + "%)"
});

To this using GSAP set():

TweenMax.set(".change", {
    backgroundColor: "hsl(" + color.h + "," + color.s + "%," + color.l + "%)"
});

You could have also used TweenLite instead of TweenMax depending on your needs.

 

Hope this helps!

 

[ajnglagla 4 Likes (Newbie)]

Thank you so much, that works ! ,

 

Also I have one more question, is it possible to use / choose pre-defined colors in hue animation?

[ajnglagla 4 Likes (Newbie)]

I am having this error :/ Do you have any idea why? Do I need extra plugin library for that?

 

ReferenceError: assignment to undeclared variable color

 

  color = {h:0, s:50, l:50};

 

 

[Jonathan 5,176 Likes (Superhero)]

The default or predefined colors can be in your CSS style sheet with a CSS rule targeting your element. Inside that CSS rule you would have your background-color set

.change {
   background-color: hsl(0, 70%, 90%);
}

Also if your still having an issue please create another codepen with the issue your having so we can see the error in the console to debug.

 

 

 

Thanks!

[ajnglagla 4 Likes (Newbie)]

I have tried your solution but no change. So I opened a new ticket about this error as you said.

http://greensock.com/forums/topic/14209-referenceerror-assignment-to-undeclared-variable-color-error/

 

Thank you @Jonathan

[Carl 9,066 Likes (Superhero)]

please also see support for relatve hsl tweening:

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

[Jonathan 5,176 Likes (Superhero)]

Sorry i misunderstood your question about the undefined var. I think for the undefined variable color error in the console, you can just define your variable by using var

// so change this:
color = {h:0, s:50, l:50};

// to this:
var color = {h:0, s:50, l:50};

It is always best to define your variables with the keyword var. Some browser JS parsers are strict and expect all variables to be defined.

 

Resource:

JavaScript var: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var