question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add a transition between lqip and final image

See original GitHub issue
  • 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!

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:1
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
adrienharnaycommented, Apr 23, 2019

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

0reactions
yosbelmscommented, Apr 18, 2019

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found