Jump to content
Search Community

mouseover animation

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

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

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