Image rollover

[Michel]

Hello

I've done a little animation where a picture rotate 90° from its base (bottom) on the front.

So the final position is completely flat.

My question is simple : is it possible to do the reverse scenario : I start with a flat picture to a position of 90°.

I hope that is sufficiently and sorry for my poor english.

Best regards

[Carl]

Hi and welcome to the GreenSock forums.

I don't know if I understand the question fully.

 

Below is code that shows how to create a tween and then play() and reverse() on ROLL_OVER and ROLL_OUT

 

import com.greensock.*;




//create a tween in a paused state
var tween:TweenLite = TweenLite.to(btn, 1, {alpha:0, paused:true})


btn.addEventListener(MouseEvent.ROLL_OVER, over);
btn.addEventListener(MouseEvent.ROLL_OUT, out);




//play and reverse on over/out
function over(e:MouseEvent): void {
tween.play();
}


function out(e:MouseEvent): void {
tween.reverse();
}

[Michel]

Hi

Thank you for your response but it's not what I want.

I want start an animation from a picture completely flat (in a div including an image 200x200 with a TweenMax set to rotationX to 90). Next I want this picture rotates (2s) from its base to reach its final position : a classic display of an image. To Illustrate that, imagines a picture with one side against the wall  and we want paste this picture on the wall with the same side on the floor... A simple rotation... I have done the reverse but not in this direction.

Many thanks

[Carl]

There is a bit of confusion here. This is the ActionScript forum which is why you got an AS3 answer.

 

I will move this topic to the JavaScript forum (no biggie) 

 

Please follow up by posting a CodePen example (instructions) of what you have. Its very difficult to provide solutions without seeing the current code you are using.

 

Still, if you have the animation working one way, I'm pretty sure if you reverse the tween (as shown above) it should do what you want. Again, a demo will be really helpful. 

 

Thanks.