How do i Resume/reverse Tween on MouseOut?

[damien]

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

[Jonathan]

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?

[damien]

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

[Carl]

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