What the Frontend? Open the interactive gallery →
Page & Layout

Masonry animation

A masonry grid where items animate into their calculated positions.

What you're seeing

Unequal-height cards fill a grid layout and each animates into its final position on load.

Where you'll see it

Portfolio grids, image galleries, content feeds.

Difficulty

Medium — 3/5

Libraries that build it

GSAPMotionCSS columns

Ready to prompt — paste this into your AI coding tool

"Calculate masonry positions in JS, animate each card to its final x/y with GSAP from opacity 0, stagger based on column"

Related Page & Layout effects

Page transitionSmooth scrollGrid revealStaggered card entranceFLIP transitionClip-path reveal
See the animated preview in the dictionary →