Jump to content
GreenSock

azuki

mouseover animation

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 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!

Link to comment
Share on other sites

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}});
}​

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

 

.scratchFloat:hover { opacity:0; }

 

Cheers to caffeinating properly before posting!

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.
×