awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
aholachek avatar

aholachek/animate-css-grid

0
View on GitHub↗
1,398 stars·71 forks·TypeScript·MIT·14 views

Animate Css Grid

Animate-css-grid is a JavaScript library that automatically animates CSS grid layout changes by calculating element position differences during DOM updates. It applies hardware-accelerated CSS transforms using initial and final bounding client rectangles to keep layout transitions smooth.

The library tracks grid container children automatically through a mutation observer system, triggering transition sequences whenever elements are added, removed, or rearranged. It maintains proper visual proportions for internal contents during reflows by calculating counter-scaling and counter-translation transforms.

Users can control transition durations, stagger delays, and easing curves using flexible configuration options and callbacks to produce wave-like animation sequences across grid layouts.

Features

  • Animated Grid Layouts - Automatically animates CSS grid layout changes by calculating element position differences during DOM updates.
  • FLIP Animations - Calculates initial and final client rectangles to smoothly transition element positions during DOM reflows.
  • Transform-Based Offset Calculation - Applies counter-scaling and counter-translation to maintain proper visual proportions for internal contents during grid reflows.
  • Motion Curve Customization - Provides configuration options and callbacks to control transition durations, stagger delays, and easing curves.
  • Staggered Animation Trails - Computes individual delay offsets for container children sequentially to produce wave-like animation sequences across the grid.
  • DOM Mutation Observation - Monitors grid container children automatically to trigger transition sequences whenever DOM elements change.

Star history

Star history chart for aholachek/animate-css-gridStar history chart for aholachek/animate-css-grid

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Frequently asked questions

What does aholachek/animate-css-grid do?

Animate-css-grid is a JavaScript library that automatically animates CSS grid layout changes by calculating element position differences during DOM updates. It applies hardware-accelerated CSS transforms using initial and final bounding client rectangles to keep layout transitions smooth.

What are the main features of aholachek/animate-css-grid?

The main features of aholachek/animate-css-grid are: Animated Grid Layouts, FLIP Animations, Transform-Based Offset Calculation, Motion Curve Customization, Staggered Animation Trails, DOM Mutation Observation.

Which projects share features with aholachek/animate-css-grid?

Projects with overlapping indexed features include: patrickkunka/mixitup — Mixitup is a dependency-free DOM element animation library and grid layout engine. It serves as a client-side content… ramotion/expanding-collection — This project is a suite of visual components and interface models designed to create animated transitions between… etesam913/react-magic-motion — React Magic Motion is a component-based library for React that automates layout transitions and visual movement. It… joshwcomeau/react-flip-move — react-flip-move is a React animation library designed for animating DOM element transitions and list reordering using… capricorn86/happy-dom — happy-dom is a JavaScript-based headless browser simulation and virtual DOM engine. It implements the Document Object… antonioru/beautiful-react-hooks — This project is a collection of reusable React hooks designed to wrap browser APIs, manage state persistence, and…

Projects sharing features with Animate Css Grid

These projects share indexed features with Animate Css Grid. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • patrickkunka/mixituppatrickkunka avatar

    patrickkunka/mixitup

    4,543View on GitHub↗

    Mixitup is a dependency-free DOM element animation library and grid layout engine. It serves as a client-side content filter and data-driven UI controller designed to manage the smooth visual transition of HTML elements during insertion, removal, and sorting operations. The system specializes in creating interactive gallery interfaces and dynamic content filtering. It allows for the reorganization of elements using custom attributes or random sequences, while synchronizing the arrangement and visibility of interface elements with an underlying data model. Beyond filtering and sorting, the li

    JavaScriptanimationdom-manipulationfilter
    View on GitHub↗4,543
  • ramotion/expanding-collectionRamotion avatar

    Ramotion/expanding-collection

    5,520View on GitHub↗

    This project is a suite of visual components and interface models designed to create animated transitions between condensed grid previews and expanded detail views. It provides a card transition library and SwiftUI animated UI components that enable a peek-and-pop interface where small preview cards expand into full-screen content. The system implements an animated grid layout that allows collections of cards to expand and contract to reveal more information. These interactions are supported by animations that transform small content cells into full-screen interfaces to maintain visual contin

    Swift
    View on GitHub↗5,520
  • etesam913/react-magic-motionEtesam913 avatar

    Etesam913/react-magic-motion

    1,122View on GitHub↗

    React Magic Motion is a component-based library for React that automates layout transitions and visual movement. It functions as a declarative animation framework, allowing developers to apply smooth motion to UI elements without the need for manual keyframe management or complex state tracking. The library utilizes a layout-based animation technique that calculates the difference between element positions before and after state changes. By monitoring the component tree and DOM layout, it automatically triggers hardware-accelerated CSS transforms to animate shifts, reordering, and navigation

    TypeScript
    View on GitHub↗1,122
  • joshwcomeau/react-flip-movejoshwcomeau avatar

    joshwcomeau/react-flip-move

    4,139View on GitHub↗

    react-flip-move is a React animation library designed for animating DOM element transitions and list reordering using the FLIP technique. It functions as a layout transition component and a DOM transition utility to create smooth movement during state changes. The library specializes in hardware-accelerated transitions for elements as they are added, removed, or reordered within a list. It employs bounding-box position tracking to calculate layout shifts and supports staggered animation timing to create sequenced visual flows. Its capability surface covers layout transition orchestration, in

    JavaScript
    View on GitHub↗4,139
  • Compare all 30 related projects→

    Curated searches featuring Animate Css Grid

    Hand-picked collections where Animate Css Grid appears.
    • Rotation transition animations
    • CSS Animation Libraries