🔀 Smooth position animation for web components.
This element is an implementation of the FLIP-technique for arbitrary elements. Simply place it around the elements you indend to reorder and they will smoothly slide over the screen when moved.
This element lives on npm. Install with
yarn add dom-flip or
npm install --save dom-flip.
You can use this element together with any element that modifies the DOM. The animated elements must be direct children of the
To be able to correlate changes in the model to changes to the DOM, this element requires that you give every element a unique ID. This must be an attribute on the element itself and cannot be a property (because properties cannot be observed via MutationObserver).
<!--If you change the order of the elements inside items, the elements willsmoothly glide to their new place.-->[[item.name]]
;// Render some items;renderresult, renderNode;// ... next animation frame// Change their order;// Positions are animated and the items will smoothly glide to their new placerenderresult, renderNode;
Although we wish it did, this element will not work with
<iron-list> due to the virtualization. Maybe this can be fixed in the future.
You can import the custom element class from
dom-flip/element if you don't want it to automatically be registered within the custom elements registry.
The element is designed to avoid layout thrashing as much as possible by batching work into microtasks and to animation frame timing.