# aholachek/animate-css-grid

Painless transitions for CSS Grid

Repository: https://github.com/aholachek/animate-css-grid
Canonical: https://ross.abutalabs.com/products/animate-css-grid
Language: TypeScript
License: MIT
License Family: permissive
Topics: css-grid, transitions, animations
Last push: 2024-04-19T08:08:41+00:00

## Health v2 (maintenance only)
Score: 23/100 (v2, computed 2026-09-03T02:39:23.370411+00:00)
- activity 0, release rhythm 8, longevity 100
- inputs: {"age_days": 3093, "days_push": 866, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1398, forks 72 (observed 2026-08-28T04:04:36.891409+00:00)

## What it is
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
- artifact type: library
- maturity: maintenance
- function: animation
- domain: frontend, web-development, web-design
- platform: browser
- tags: css-grid, transitions, layout-animation, typescript, dom, nodejs

## Member repositories
- aholachek/animate-css-grid (main) score 23

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:04:36.891409+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T04:39:12.800221+00:00, confidence not recorded.
  - readme: https://github.com/aholachek/animate-css-grid (fetched 2026-08-28T04:04:36.891409+00:00, sha d88e5db6c161)
  - registry_npm: https://registry.npmjs.org/animate-css-grid (fetched 2026-08-29T11:53:42.199191+00:00, sha c441454f12f1)
- Data as of 2026-08-30T08:39:29.467469+00:00.