CSS Masonry Grid & Framer Motion Layout Animations

Websites like Pinterest and Unsplash have made masonry grids extremely popular.

Today we'll cover how you can make one using purely CSS, no JavaScript required. We'll add some awesome shared layout animations using the Framer Motion library, as well as learn a bit about tailwind css and daisy UI, a component library built on top of tailwind which makes styling your applications extremely simple.

#programming #reactjs #nextjs #coding #framermotion #tailwindcss

📚 Project Links

🔗 My Links

[seklerek]

This is exactly what I needed for a project at work, perfectly explained! Thank you!

[maylogger]

Thank you very much!!! I was trying to find a way to make some effect like this, and the first thing I found was here, and you answered exactly what I was looking for!!!! Thank you very much.

[nonstopper]

Highly recommend using URL state with this so that you can share urls that go directly to that highlighted image

[_Yolandi]

so useful, bro your channel is super underrated, glad I found you

[jerald]

Thanks for this good tutorial, very helpful to me. great man👍

[DEEEZZ_]

Like your content its easier to understand the 99% of the crap people have posted you atleast explain what your doing

[GabrielMartinez-ezue]

The problem with that package is that its class based

[nareshdabbar]

How it's working cards masonry here I didn't understand,

[azmineabrar]

Quick question: Does it also work as page transition in next.js? For example, if I am transitioning from one page to the other with the same layoutID, I want it to transition from one to other. How to do it can you suggest?

[aaryakshah]

Does anyone know how to achieve this effect in a framework-independent way? Like without using framer motion and react-specific features?

[shanKirs]

The image which is zooming back into place appears behind the adjacent image before it completes the animation.

It does not seem to be a problem in a samll number of imges - when there are 50 cards on the screen it looks real bad.

Its a prblem with the Z-index - any way to fix this?
Images which appear subsequently seem to have a higher z-index value - or atleast appears so.