Replace background img with crossfade effect, possible?

[Saleem Beg]

Hi all,

As you can see in codepen, I have four buttons, each of them is responsible for setting its corresponding image as the main background image, while the rest get arranged in an appropriate order in the 3 boxes below. The logic is working fine, but I would like the background image of the #main_image to crossfade into the new image as a button is clicked; and the same effect to be applied to the 3 boxes underneath.

 

Any tips or tricks will be appreciated.

 

Thanks!

 

PS: Please zoom codepen to 0.25x to see the 3 boxes, or simply view this in codepen.

See the Pen QWMpvgb?editors=1111 by saleemepoch (@saleemepoch) on CodePen

[Cassie]

Hi @Saleem Beg,

 

Thanks for being part of club GreenSock!

 

At the moment you're changing the src of the image, you won't be able to animate this.

I would recommend having the images positioned absolutely on top of each other, then you can change the opacity to fade between them.

 

// e.g.

gsap.to(oldImage, {
  autoAlpha: 0
})
gsap.to(newImage, {
  autoAlpha: 1
})

 

 

 

 

[Saleem Beg]

Thanks Cassie,

This is one approach, but I wanted to avoid it due to code repetition. This means we will have four absolute divs in each of the place holders of exactly the same set of images.

I wonder if there is another cleaner way of managing this?

[OSUblake]

Sorry, but that's the only way to crossfade between images.

[elegantseagulls]

13 hours ago, Saleem Beg said:

due to code repetition

There is absolutely no performance loss, nor bad coding habits with having multiple divs here. Loading the images by changing the src would cause a lot more issues due to http requests and repainting/rendering (not to mention it would be an accessibility/ADA challenge to implement well). If you are still worried about the extra markup, you could use WebGL to do image effect, but, again, you'd loose accessibility best practices.

[elegantseagulls]

13 hours ago, Saleem Beg said:

This means we will have four absolute divs in each of the place holders of exactly the same set of images.

You could also just use JS to append one extra div with the clicked image behind the current image, then fade the old image to opacity 0 and remove that element.