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
joshwcomeau avatar

joshwcomeau/react-flip-move

0
View on GitHub↗
4,139 stars·251 forks·JavaScript·MIT·17 viewsjoshwcomeau.github.io/react-flip-move/examples↗

React Flip Move

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, including enter and exit animations, initial mount sequences, and the preservation of container dimensions to prevent layout jumps. The system also provides lifecycle callbacks and configuration options for custom position detection and wrapper element definitions.

Features

  • Layout Transition Engines - Acts as a layout transition engine that automatically orchestrates smooth movement and geometry changes during DOM updates.
  • Reordering Animations - Provides smooth hardware-accelerated transitions for items being reordered within a list.
  • FLIP Animations - Uses the FLIP technique to simulate smooth movement between different DOM states.
  • React Implementations - Provides a specialized React library for animating DOM element transitions and list reordering using the FLIP technique.
  • UI Element Bounding Boxes - Captures DOM element bounding boxes to calculate exact translation distances for layout shifts.
  • Element Transitioning Mechanisms - Manages the entry and exit animations of components to ensure visual continuity during updates.
  • Layout-Driven Position Transitions - Moves elements between positions using layout-calculating techniques for smooth visual transitions.
  • Hardware-Accelerated UI Transitions - Offloads animations to the GPU using CSS transform and opacity properties for high frame rates.
  • List Transition Animations - Creates smooth visual transitions for React lists during item reordering, addition, or removal.
  • Group Enter-Update-Exit Animators - Implements hardware-accelerated animations for elements as they enter or exit the document.
  • Animation Lifecycle Callbacks - Provides hooks that execute custom logic at the start and end of animation sequences.
  • Mounting Animations - Triggers specific animation sequences during the initial mount of components to the DOM.
  • Layout Dimension Animators - Includes utilities to prevent layout jumps by animating container dimensions during element removal.
  • Runtime Height Calculators - Measures rendered heights at runtime to maintain container dimensions during removal sequences.
  • Staggered Animations - Implements incremental delays for subsequent elements to create natural, sequenced movement.
  • Motion Design Frameworks - Implements high-fidelity motion and staggered transitions to polish web application user interfaces.
  • UI Animation - Animates DOM changes using the FLIP technique.

Star history

Star history chart for joshwcomeau/react-flip-moveStar history chart for joshwcomeau/react-flip-move

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 joshwcomeau/react-flip-move do?

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.

What are the main features of joshwcomeau/react-flip-move?

The main features of joshwcomeau/react-flip-move are: Layout Transition Engines, Reordering Animations, FLIP Animations, React Implementations, UI Element Bounding Boxes, Element Transitioning Mechanisms, Layout-Driven Position Transitions, Hardware-Accelerated UI Transitions.

Which projects share features with joshwcomeau/react-flip-move?

Projects with overlapping indexed features include: sghall/react-move — React Move is a declarative animation library for React that animates components by interpolating between start and… chenglou/react-motion — react-motion is a physics-driven animation toolkit and library for React applications. It provides a system for… formkit/auto-animate — Auto-animate is a framework-agnostic JavaScript animation library used to automatically animate the entry, exit, and… nandorojo/moti — Moti is a cross-platform animation framework and state-driven animation engine designed to create consistent visual… rich-harris/ramjet — Ramjet is a JavaScript animation engine and DOM element morphing library. It functions as a transition utility that… etesam913/react-magic-motion — React Magic Motion is a component-based library for React that automates layout transitions and visual movement. It…

Projects sharing features with React Flip Move

These projects share indexed features with React Flip Move. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • sghall/react-movesghall avatar

    sghall/react-move

    6,564View on GitHub↗

    React Move is a declarative animation library for React that animates components by interpolating between start and end states with configurable timing and easing. It provides data-driven transitions for single elements, groups, lists, and SVG elements, supporting staggered timing, custom interpolation for non-numeric values like colors and paths, and drag-and-drop reordering of list items. The library distinguishes itself through its support for custom interpolation functions that replace default numeric interpolation, keyed array reconciliation for tracking items as they enter, update, or l

    JavaScriptanimateanimationeasing
    View on GitHub↗6,564
  • chenglou/react-motionchenglou avatar

    chenglou/react-motion

    21,921View on GitHub↗

    react-motion is a physics-driven animation toolkit and library for React applications. It provides a system for creating fluid user interface transitions by simulating natural spring movement to move elements toward destination values using stiffness and damping parameters. The framework manages the visual entry and exit of components as they mount and unmount within the document structure. It coordinates complex motion patterns, including staggered animations and fluid transitions for items being added, removed, or reordered within dynamic lists. The library covers a broad range of animatio

    JavaScript
    View on GitHub↗21,921
  • formkit/auto-animateformkit avatar

    formkit/auto-animate

    13,847View on GitHub↗

    Auto-animate is a framework-agnostic JavaScript animation library used to automatically animate the entry, exit, and movement of elements within a document. It functions as a transition tool that adds smooth motion to web application elements to prevent abrupt layout jumps during content changes. The utility is designed to be reduced motion compliant, automatically detecting and respecting system-level accessibility settings to disable animations for users with motion sensitivities. It also features a plugin system that allows the replacement of default fade and scale transitions with custom

    TypeScriptanimationjavascriptreact
    View on GitHub↗13,847
  • nandorojo/motinandorojo avatar

    nandorojo/moti

    4,542View on GitHub↗

    Moti is a cross-platform animation framework and state-driven animation engine designed to create consistent visual transitions and motion effects across mobile and web platforms. It functions as a native-thread animation wrapper and library that leverages a shared-value system to synchronize state changes between the logic layer and the native rendering engine. The framework distinguishes itself through its layout transition tools and the ability to execute complex sequences and loops on the native thread to maintain high frame rates. It provides a system for orchestrating smooth entry and e

    TypeScript
    View on GitHub↗4,542
  • Compare all 30 related projects→