Jump to content
GreenSock

ajnglagla

Changing text color with Hue effect?

Recommended Posts

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

 

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

Link to comment
Share on other sites

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/

  • Like 3
Link to comment
Share on other sites

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!

 

:)

  • Like 3
Link to comment
Share on other sites

Thank you so much, that works ! :),

 

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

Link to comment
Share on other sites

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
 
 

QAMYy5E.png

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

 

:)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×