Jump to content

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

Cross-Dissolving and Scaling up images at same time

Recommended Posts


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:

-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!



Link to comment
Share on other sites

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:




Happy tweening.



  • Like 1
Link to comment
Share on other sites

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.

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.