In this example, I used Framer Motion to animate the height of the image because I was already using it in my app for the sidebars, and really find it very intuitive. If you have any questions give me a message on Twitter, and I can try and help. In all, everything depends on the image’s onLoad event. Learn more about Framer motion here.Īnd that’s it, short and sweet(ish). Then the next few lines define the animation that will be triggered after the image is loaded.

🚀 Framer Motion animation: in lines 20-30, the image tag has been converted to a Framer motion tag, by adding the motion.

When the image is loading, the pulse class is added, creating a shimmer effect – that’s defined in the CSS file.

✨ CSS shimmer effect: on line 17, you’ll see the CSS classes: 'pulse', and 'loadable'.

Once the browser has loaded the image, the imageLoaded function is called, which changes the component state, and the image’s CSS class: And entire thing works from the image tag’s onLoad attribute on line 31. The majority of it is React JSX markup – an image tag wrapped with a div element. Each time you press the refresh button (bottom left of sandbox), it’ll load a different image from Unsplash, so you can see how it adapts to differently sized images: CodeSandbox Example All in 40 lines: I’ve isolated this image lazy-loader into a single React component in CodeSandBox.

Creating the Shimmer Effect, and adding (Framer) Motion

In hindsight, maybe it would have been possible to calculate the height of the images before they had loaded ( please let me know if you know how!). Lazy loading skeleton imagesĪs shown above, each image starts from a predefined minimum height, and then grows or shrinks depending on the actual image size. Whilst there are plenty of useful React libraries that can lazy load images, for my use case where the images are stacked in a column, I needed a way to do this with a dynamic height: Your browser does not support the video tag. 💡 Note: This effect is better for apps rather than images in articles, as changing heights within article content can cause a layout shift. Images in a side menu start off with a loading shimmer effect, and then fluidly grow to their correct height and fade in when loaded: Your browser does not support the video tag. Recently I created a nice lazy-loading image effect for some drag and drop menu items in my app.

Animate motion in postview