Module animate 

Drop animations. Experimental — this module is the one part of the crate whose behavior depends on browser paint timing rather than pure logic; validate it in your target renderer and tune duration to taste.

FlipItem implements the FLIP technique (First–Last–Invert–Play) for reorder transitions: when your list order changes, each item measures where it moved from, renders instantly back at its old position via a transform, then releases the transform with a CSS transition — so tiles appear to glide to their new slots.

You drive it with an epoch counter: bump it whenever order changes.

let mut items = use_signal(|| vec![/* … */]);
let mut epoch = use_signal(|| 0usize);
rsx! {
    SortableList {
        len: items.read().len(),
        render: move |ix: usize| rsx! {
            FlipItem { epoch: epoch(), Row { item: items.read()[ix].clone() } }
        },
        on_sort: move |ev: SortEvent| {
            apply_sort(&mut items.write(), ev);
            epoch += 1;
        },
    }
}

Snap-back on cancel needs no Rust at all — it’s a CSS recipe. The core Draggable exposes no transform during native drags (the browser owns the ghost), but touch drags via PointerDraggable use your DragOverlay; give the overlay’s child transition: transform 150ms ease and render it conditionally on dnd.dragging() — reverting your item’s data-dragging styles with a transition produces the settle effect.

Re-exports

pub use FlipItem_completions::Component::FlipItem;

Structs

FlipItemProps

Properties for the FlipItem component.

Functions

FlipItem

Wraps one list/grid item and glides it to its new position whenever epoch changes. See the module docs for the driving pattern.