aholachek/animate-css-grid

Health v2 · maintenance only

Adoption not part of the score

1398 stars · 72 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded

A small TypeScript library that animates CSS Grid layout changes (grid-column, grid-row, grid-template-columns, gap) using performant transforms. You call wrapGrid on a grid container and it automatically transitions between layout states with configurable duration, easing, and stagger.

Use cases

• animate css grid layout changes smoothly
• transition grid items when columns or rows change
• add staggered animations to a photo grid
• animate grid gap and template changes with better performance than css keyframes
• make a filterable grid animate item repositioning

When to choose

• you use CSS Grid and want smooth layout transitions without writing FLIP logic yourself
• you need to animate grid-template-columns, gap, or grid placement, which pure CSS cannot transition
• you want configurable easing, duration, and stagger for grid animations

When to avoid

• your layouts use flexbox or absolute positioning instead of CSS Grid
• you need a general-purpose animation library for non-grid properties
• you need framework-specific animation integrations with built-in support

Facets

library · maturity maintenance

animation frontend web-development web-design browser css-grid transitions layout-animation typescript dom nodejs

Member repositories

For agents

markdown · JSON · MCP: product_card(name="aholachek/animate-css-grid")