Add a transition between lqip and final image
See original GitHub issuereact-ideal-image
version: 2.2.0node
version: 10.11.0npm
(oryarn
) 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!
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Adjust transitions with multiple images in Final Cut Pro
Final Cut Pro includes transitions that use still images from the clips before and after the transition. Select the frames to use for...
Read more >Suggested transformation options for placeholder images/ LQIP
In each case, the idea is to load a low-quality copy of the image ... the placeholders blend seamlessly with the intended 'final'...
Read more >How to create a kick-ass image preview with LQIP
Thus the browser will show the embedded placeholder (transparent or low quality image) until it loads an image corresponding to the viewport ...
Read more >Improving the Image Loading Experience
It also shows how techniques like LQIP can make the image loading experience ... And that means the images are then put at...
Read more >Progressive Image Loading and IntersectionObserver - Medium
When it finishes, do a soft transition from the placeholder to the ... after finish the loading, add the original image with absolute ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hey, thanks for the pointer but I instead went with gatsby-image
@adrienharnay, @stereobooster The
Img
component of this lib has smooth transitions, maybe it can useful as example of what you want to do.