Jump to content


mouseover animation

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

take a look here:



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


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">
		$('.scratchFloat').mouseover(function (e){    
		    TweenLite.to($(this), .2, {css:{opacity:0}});


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.