Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
damien

How do i Resume/reverse Tween on MouseOut?

Recommended Posts

I'm new to GreenSock and been researching this for a while now and seem this is the only way to do it but not sure how

 

I'm doing a mayor project for school and this would be nice to add to it. could someone explain how?

 

When i roll over i want the animation to play then when i hover my mouse out i want it to reverse/or/resume back to its original state

post-18516-0-72052100-1392982321_thumb.png

post-18516-0-71815400-1392982327_thumb.png

Link to comment
Share on other sites

Hello damien, Welcome to the Greensock Forums!

 

Here is an example of that rollover effect using that image:

 

Example:

See the Pen tukhf by jonathan (@jonathan) on CodePen

 

It is just a simple to() tween, that animates the autoAlpha property. AutoAlpha affects the opacity and visibility CSS properties of the element.

 

Taken from the CSSPlugin Docs:

 

autoAlpha - the same thing as "opacity" except that when the value hits "0", the "visibility" property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, "visibility" will be set to "inherit". We don't set it to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

 

The below uses jQuery on() method to bind the hover events:

// Hover events
$(document).on("mouseenter", "#wrapper", function(){
  
    var $this = $(this),
        $overlay = $(this).children("#overlay");

    TweenMax.to($overlay, 0.9, {autoAlpha:1, ease:Power4.easeInOut});
  
}).on("mouseleave", "#wrapper", function(){
  
    var $this = $(this),
        $overlay = $(this).children("#overlay");

    TweenMax.to($overlay, 0.9, {autoAlpha:0, ease:Power4.easeInOut});
  
});

You could animate other CSS properties depending on what type of effect you were after.

 

Does this help? :)

  • Like 3
Link to comment
Share on other sites

This is exactly what I'm after, although i'm using flash cs6 as3 which i forgot to mention

Link to comment
Share on other sites

Create an FLA with a MovieClip with instance name mc

 

import com.greensock.*;
import flash.events.MouseEvent;


var mcTween = TweenLite.to(mc, 1, {scaleX:1.5, scaleY:1.5, paused:true});


mc.addEventListener(MouseEvent.ROLL_OVER, mcOver);


function mcOver(e:MouseEvent):void {
mcTween.play();
}


mc.addEventListener(MouseEvent.ROLL_OUT, mcOut);


function mcOut(e:MouseEvent):void {
mcTween.reverse();
}
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.
×