Gatsby: [gatsby-image] API for controlling animation

[EmilTholin]

Thank you for your hard work on gatsby-image. It is the most powerful image abstraction I've ever seen. I get chills just experimenting with this masterpiece.

Do you think the API could be expanded to control the animation of the image, even when the image is cached? I really like how it behaves when the image isn't loaded yet.

[KyleAMathews]

I appreciate the praise :-) glad to hear gatsby-image is working as hoped!

So anything is possible :-) it is just code after all. Well, possible, as long as it's programmable. I'm not entirely sure what you want though? It's not trivial to decide if an image is cached or not. A slow hard drive or overloaded computer, for example, could return an image slower than a desktop connecting to an internal website over an ethernet connection. Would you want to change the animation speed depending on how fast the image loads or something?

[EmilTholin]

If I understand it correctly (bear with me, I might be totally off base), imgLoaded will be set to true if it has been seen before. This means that the opacity for this image will be set to 1 straight away if it is in the cache. This results in the effect in the gif: There is no animation between the base64 image and the "real" image except for the first time it is loaded.

I guess my question is if you could animate the opacity of the already loaded image as well.

[KyleAMathews]

The "cache" in the component isn't the same thing as the browser cache. It's after the site has loaded and you show the same image a second time. E.g. if you land on a page, go to another page, and then click back. On clicking back, there's no animate-in. What you're showing in the gif is the exact same behavior on both just the second is faster since the browser loads the image the second time from its own cache.

[EmilTholin]

So obvious after you explained it. I feel so stupid. Thanks Kyle.

[KyleAMathews]

haha no worries :-) Thanks for investigating and playing with things! Really nice to get solid feedback immediately after releasing something!