Add a transition between lqip and final image

[adrienharnay]

• react-ideal-image version: 2.2.0
• node version: 10.11.0
• npm (or yarn) version: Yarn 1.9.4

Relevant code or config

I will take the demo as an example: https://stereobooster.github.io/react-ideal-image-experiments/

What you did: Load the page

What happened: No transition between blurred image and final image

Reproduction repository: Again, using the demo

Problem description: It is a bit rough going from lqip to final image without any kind of transition

Suggested solution: Would be neat to implement it. Would be up for it if given pointers 👍

Thanks for this awesome package!

[stereobooster]

Hey. By transition you mean some kind of animation, like fade-in or something? I guess this can be done with css animation

[adrienharnay]

Hey, yes this is totally what I meant! I tried animation, but since the background-image placeholder is removed as soon as the final image appears, there is a white flash before the image fades in. I think this could be managed in react-ideal-image, what do you think?

[stereobooster]

In general yes, but I do not have time for it right now. Also build is broken in the master, I guess this is because I merged renovate branch with update of the babel

[adrienharnay]

I understand. I would be eager to hep you fix the build and develop this feature when you will have some time 🙂

[yosbelms]

@adrienharnay, @stereobooster The Img component of this lib has smooth transitions, maybe it can useful as example of what you want to do.

[adrienharnay]

Hey, thanks for the pointer but I instead went with gatsby-image