Change image background

[pattocheu]

Hi everybody,

 

My first topic !

 

First off all, thank you for all support we can find on this forum. 

 

I'm a newbie on JavaScript and Gsap, but I've done my first code pen for my website and i have a question.

 

I would like to know the right syntax in order to replace "color" by "images". 

 

On my code pen when i click on the viewport i change the color of the box but for my website i would like to change an image.

 

Sorry for my english, i'm french 😀

 

Thank you.

 

Patrick.

See the Pen WNGJYzx by pattocheu (@pattocheu) on CodePen

[ZachSaucier]

Hey Patrick and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

Usually when you want to transition between images in the same position it's best to layer them and then fade in the new image that you want to show. If you only switch the src then you'll have to wait for the new image to load which isn't a good experience.

 

So I'd position the images absolutely all on top of each other at the start with some hidden then animate their autoAlpha in your tween that you have. You should also set the zIndex of the new image to one higher than the one visible to make sure it's on top.

[pattocheu]

Hi @ZachSaucier many thanks for your advice.

 

I will work accordingly your idea, and paste my code pen once it will be done.

 

Thank you.