Jump to content
Search Community

Animate color of a:link aka CSS properties cheat sheet

ApplePI test
Moderator Tag

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

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

Link to comment
Share on other sites

It's a nice idea however Javascript and Greensock don't quite work that way. Greensock is able to animate the properties of any DOM element (or even any javascript object), but unfortunately things like :link, :hover, :active etc are pseudo elements and not present in the DOM for Javascript selection.

You could either add css-transitions to animate your anchor CSS directly:

a {
   color: #0000FF;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  transition: color 1s ease;
}
a:hover {
  color: #FFFFFF;
}

or setup javascript event listeners for mouseenter and mouseout and run tweens on those:

// using jQuery
$(document.body).delegate('a', 'mouseenter', hover).delegate('a', 'mouseout', unhover);
function hover() {
  TweenMax.to(this, 1, css:{ color: "FFFFFF" } );
}
function unhover() {
  TweenMax.to(this, 1, css:{ color: "0000FF" } );
}

Link to comment
Share on other sites

The majority of CSS properties should be animatable. There was talk of making a list but I'm not sure if that was released - http://www.greensock.com/get-started-js/#css does mention a bunch of animatable and helper properties though. Just remember to use the camelCase name of the style (e.g. backgroundColor, marginTop) and there's a good chance CSSPlugin will animate it (even CSS3 styles work with the most recent updates to Greensock JS).

Link to comment
Share on other sites

Actually, there is a pretty easy solution for this: we created a CSSRulePlugin that allows you to animate the actual css rules themselves! So you could do this:

var rule = CSSRulePlugin.getRule("a");
if (rule) { //just make sure it exists
   TweenLite.to(rule, 2, {cssRule:{color:"red"}}); //animates all the links to red
}

 

And if you wanted to animate just the hover state (assuming you defined such a rule in your style sheets), you'd use CSSRulePlugin.getRule("a:hover").

 

http://api.greensock...RulePlugin.html

 

(note: CSSRulePlugin was just updated today, so please make sure you download the latest files)

 

As far as a list of animatable properties, Jamie is exactly right - almost every property is animatable. The only exception that comes to mind right now is gradients, but I just haven't tried that yet. Is there something in particular you want to know about?

  • Like 1
Link to comment
Share on other sites

Animating the CSS rules with CSSRulePlugin is amazing! I'd never noticed it before but it is very cool indeed.

 

One thing I'd mention about animating the :hover rule though: It doesn't apply 'transitions' to regular hover events, rather it's a one-off change to the :hover style. If you hover/are hovering the link while :hover is being animated you will see the color change. Once the tween completes though you will get instant color changes like usual, just to the tweened-to color instead > example

 

You will still need to bind events or use a CSS transition if you want your links to always animate as they are being interacted with.

Link to comment
Share on other sites

  • 1 month later...

Hi,

 

I've tried the solution you described (CSSRule) but I get a Security error in FireFox FireBug:

 

SecurityError: The operation is insecure.

 

specs:

GreenSock TweenMax Beta 1.8.2

CSSRulePlugin.min.js version beta 0.5

FireFox 18.0.2

FireBug 1.11.1

Windows 7

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.
×
×
  • Create New...