how to change the color of a text?

June 21, 2012

Yow guys, i tried this, but it didn't work

TweenMax.to($(this), 0.5, {css:{scale:1.5, color:"#A20004"}, ease:Back.easeOut});

Is there a way to change the text color?

And by the way, is there a way to set initial scale to a div? I notice that css have no scale property.

June 21, 2012

Hey, you can use RaphaelJS with TweenMax to convert text color.

June 21, 2012

@B2rana, thx for the reply. I've looked at Raphael.js, i'm still confused though.

Can you give me the script example?

Thx

June 21, 2012

Here is the simple example:

<html>

<head>

$(document).ready(function(){

var paper = Raphael('canvas', 400, 500);

var text = paper.text(50, 100, 'Some text goes here');

text.attr({'font-size': 30, 'font-weight': 'bold', 'text-anchor':'start', 'fill':'#ff0000', 'font-family':'Trebuchet MS'});

TweenMax.to(text, 1, { raphael:{'fill':'#CCCCCC'}, delay:1 });

TweenMax.to(text, 1, { raphael:{'fill':'#00ff00'}, delay:2 });

});

</script>

</head>

<body>

</body>

</html>

You can also see this post

http://forums.greensock.com/topic/6255-experiment-with-greensock-raphaeljs/

June 21, 2012

Just to chime in, you don't need canvas or raphael to change text color of a DOM element (div, span, p, etc).

this will work just fine:

TweenLite.to($('someClass'), 1, {css:{color:"#ff0004"}, ease:Back.easeOut})

in your example what exactly is $(this) ?

are you sure it is a valid DOM element that contains text? or does it have a child that contains text?

feel free to upload a simplified demo of this functionality not working (strip out all unnecessary code / assets)

--

as for the scale, the cssPlugin does a lot of magic behind the scenes to handle scale in different browsers. your best bet is to initially set the scale with a tween using a 0-second duration.

June 22, 2012

So, i make the buttons using array, so the script is like this:

for(a=0; a<menuTeks.length; a++){

$("#navTek_"+a).mouseover(function() {

TweenMax.to($(this), 0.5, {css:{scale:1.5}, ease:Back.easeOut});

});

$("#navTek_"+a).mouseout(function() {

TweenMax.to($(this), 0.5, {css:{scale:1}, ease:Back.easeOut});

});

}

So the $(this) is referring to the button that i rollover, in the script the scale works, but when i tried tweening the color, it didn't work

June 22, 2012

So i just put it here to correct my mistake, i found out why it didn't work

my old code was like this:

<div><a href="">button</a></div>

That's why it didn't work, coz i put the a tag inside the div, but when i change the placa like this:

<a href=""><div>button</div></a>, it works. Thx to Carl (once again) who ponted about the Dome Element.

And by the way, nice trick on the scale thing

January 19, 2021

I got it working just adding color: "red" after ease or duration or where ever you want it to add.

Seems like it's a update.

January 19, 2021

Hey @Volfra and welcome to the GreenSock forums. Thanks for contributing! This thread is very old. GSAP 3 doesn't have Lite/Max or require the css object. For full details see the migration guide.

Notifications

Messages

how to change the color of a text?

Warning: Please note

Recommended Posts

Guest newdevide

B2rana

Guest newdevide

B2rana

Carl

Guest newdevide

Guest newdevide

Volfra

ZachSaucier

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members