Cross-Dissolving and Scaling up images at same time

[pfash]

Hi,

I'm brand new to GSAP. Learning a lot.

 

I want to, at the same time, scale up and cross-dissolve two images when the user clicks on the first state of the image.

I did this similar effect with JS and CSS here:

http://bigbendhc.org/theUplink/karane-health-care-administration/
-mouseover or click on the arrow below his face.

===================

 

Now I'm trying to do this effect using GSAP.

I have scaled up the first state image up by doing this:

 

////Swap and scale up an image when user clicks on it
this.myImage_state1.addEventListener("click", swapAndScaleUpImage.bind(this));
function swapAndScaleUpImage() {

TweenMax.to(stage.myImage_state1, 2, {scaleX:2, scaleY:2});

}

 

 

...But now I want to cross dissolve from myImage_state1 to myImage_state2 while the images are scaling up.

Seems simple but not sure how to fit that into the function.

 

Thanks much!

 

 

[PointC]

Hi pfash 

 

It's hard to know what's happening without a CodePen, but if I understand your question correctly, you could do something like this:

TweenMax.to([element1, element2], 2, {scale:2});
TweenMax.to(element1, 2, {autoAlpha:0});
TweenMax.fromTo(element2, 2, {autoAlpha:0}, {autoAlpha:1});

Since you're scaling both elements to 2, they can go into an array in the same tween. You're scaling is uniform so you don't need scaleX and scaleY. A simple scale is fine. I'm assuming your first element is starting at an opacity of 1 so it's faded out in the second tween. The third tween simply animates the autoAlpha of the second element from 0 to 1. You could also put these tweens on a timeline to play/reverse on click/hover if you wanted to.

 

If you need more detailed answers, please create a CodePen demo for us. More info about that:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening.

 

[pfash]

Yes, Thanks PointC.

That works...and yes I'd like it to go back to original state when user clicks again (go in reverse). So it sounds like a timeline is necessary. I'll learn about code pen so I can provide better info upfront.

Appreciate your help.