Isotope — Filter and Sort Magical Animated Layouts

Introduction

Isotope is a JavaScript layout library by Metafizzy that arranges elements into masonry, fit-rows, vertical, and other grid patterns. It provides animated filtering and sorting so users can dynamically reorganize content with smooth CSS transitions, making it a staple for portfolio pages, galleries, and filterable catalogs.

What Isotope Does

• Arranges elements in masonry, fitRows, vertical, and cellsByRow layouts
• Filters items by CSS selectors or custom functions with animated transitions
• Sorts items by data attributes, text content, or custom comparators
• Handles responsive re-layout on window resize automatically
• Supports dynamically added and removed elements with layout updates

Architecture Overview

Isotope measures each element's size and calculates optimal placement using the selected layout algorithm. When filtering or sorting, it applies CSS transforms (translate and scale) with transitions to animate items from their old positions to new ones. Hidden items are scaled to zero and have pointer-events disabled. The library uses a modular layout system where each mode (masonry, packery, fitRows) implements its own placement logic while sharing the animation and measurement infrastructure.

Self-Hosting & Configuration

• Install via npm or include the script directly from a CDN
• Initialize with a container selector and itemSelector option
• Set layoutMode to choose between masonry, fitRows, vertical, or cellsByRow
• Use getSortData to define custom sort keys from element attributes
• Call iso.arrange({ filter, sortBy }) to apply filter and sort simultaneously

Key Features

• Multiple built-in layout modes with extensible plugin architecture
• Animated filter and sort transitions with CSS transforms
• Responsive layout that recalculates on container resize
• Stamp support to fix certain elements in place during layout
• Compatible with imagesLoaded for layouts dependent on image dimensions

Comparison with Similar Tools

• Masonry — layout-only by the same author; Isotope adds filtering and sorting on top
• CSS Grid — native but lacks animated filtering and dynamic sorting
• Packery — bin-packing layout by the same author; Isotope offers more layout modes
• Muuri — similar features with drag-and-drop; Isotope is more mature and widely adopted

FAQ

Q: What is the difference between Masonry and Isotope? A: Masonry provides only layout. Isotope includes masonry layout plus animated filtering, sorting, and multiple layout modes.

Q: Can I add items after initialization? A: Yes. Call iso.appended(elements) or iso.insert(elements) to add items and trigger re-layout.

Q: Does Isotope work with images? A: Yes. Pair it with the imagesLoaded library to trigger layout after images have loaded.

Q: Is Isotope free to use? A: Isotope uses a GPL v3 license for open-source projects and offers commercial licenses for proprietary use.

Sources

• https://github.com/metafizzy/isotope
• https://isotope.metafizzy.co