Jump to content
Search Community

how to change the color of a text?

Guest newdevide

By Guest newdevide
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Guest newdevide

Guest newdevide

Posted
Posted

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.

Link to comment
Share on other sites
Guest newdevide

Guest newdevide

Posted
Posted

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

Can you give me the script example?

 

Thx

Link to comment
Share on other sites
B2rana test

B2rana

Posted
Posted

Here is the simple example:

 

<html>

<head>

<script type="text/javascript" src="js/greensock/plugins/RaphaelPlugin.min.js"></script>

<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>

<script type="text/javascript" src="js/raphael-min.js"></script>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script>

$(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>

<div id="canvas"></div>

</body>

</html>

 

You can also see this post

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

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

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.

  • Like 2
Link to comment
Share on other sites
Guest newdevide

Guest newdevide

Posted
Posted

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

Link to comment
Share on other sites
Guest newdevide

Guest newdevide

Posted
Posted

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

Link to comment
Share on other sites
  • 8 years later...

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...