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

🚀 Framer Motion animation: in lines 20-30, the image tag has been converted to a Framer motion tag, by adding the motion. tag decorator. Then the next few lines define the animation that will be triggered after the image is loaded. Learn more about Framer motion here.

And that’s it, short and sweet(ish). In all, everything depends on the image’s onLoad event. If you have any questions give me a message on Twitter, and I can try and help.

Discovering Framer Motion:

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 scroll back to the first image, the way the side panel opens up and bounces is created with Framer motion effects.

If you want to learn it, here’s how I got started using it – just by exploring other people’s creations in CodeSandbox. Animating a square is always a good starting point for me:

I usually struggled to make basic slideout menus, but those crazy animations are a few lines:

anim.start({ y:-400, scale:1.2 })
anim.start({ y: 200, scale:0.5 })
anim.start({ y:-100, rotateZ:-180, scale: 2})

learned it from this sandbox by @pedropalhari https://t.co/9LXcLPkfm9

— graeme (@graeme_fulton) May 27, 2021

What do you use for lazy-loading images? How do you like animation libraries like Framer Motion? Good luck with making!