mouseover animation

[azuki]

hi all,

 

After a good search in this forum, I'm surprised to find that I'm the first one to ask this question... unless my search skills have gone sour...

 

Is there a really simple way to create a mouseover animation using GSAP? I'm not super familiar with javascript/jquery so this would be my first attempt at going this route to create a rollover event.

 

Usually, I create all of my button animations in CSS but I have a very specific animation in mind that I can't do in CSS: on mouseover, the image simply fades out - not fading back in on mouseout. Basically, I just want the img/btn/whatever to fade out with the smooth easing of Greensock on a mouseover.

 

Any tips?

 

Sorry if this has been asked before!

[Carl]

take a look here:

http://jsfiddle.net/...bassador/WeATr/

 

//html
<div id="greenButton">green</div>

//javascript

var green = document.getElementById("greenButton");

green.onmouseover = function(){
TweenLite.to(green, .2, {css:{opacity:0}});
}​

[azuki]

thanks, Carl. I can see how this is working in the JSFiddle but my implementation of it isn't producing the same tweened fadeout. what am I missing?

 

<script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>
        <script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script>
        <script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script>
        <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	  $(document).ready(function(){
		$('.scratchFloat').mouseover(function (e){    
		    TweenLite.to($(this), .2, {css:{opacity:0}});
		});
	  });
	</script>

 

The mouseover is fading out the ".scratchFloat" buttons but it's happening immediately rather than tweened.

 

as always, thanks for your help!

[azuki]

nevermind! I had this in the CSS which was overriding the GSAP!

 

.scratchFloat:hover { opacity:0; }

 

Cheers to caffeinating properly before posting!