dom-flip - Vaadin Add-on Directory
� Smooth position animation for web components.
# \
[](https://travis-ci.org/NeoLegends/dom-flip)
[](https://greenkeeper.io/)
[](https://www.webcomponents.org/element/Festify/dom-flip)
� Smooth position animation for web components.
[Demo](https://neolegends.github.io/dom-flip/)
This element is an implementation of the [FLIP-technique](https://aerotwist.com/blog/flip-your-animations/) for arbitrary elements. Simply place it around the elements you indend to reorder and they will smoothly slide over the screen when moved.
[[item.name]]
```
### lit-html:
```ts
const template = (items: { id: string, name: string }[]) => html`
${items.map(item => html`
`;
// Render some items
const result = template([
{ id: "1", name: "Hello" },
{ id: "2", name: ", " },
{ id: "3", name: "World!" }
]);
render(result, renderNode);
// ... next animation frame
// Change their order
const result = template([
{ id: "1", name: "Hello" },
{ id: "3", name: "World!" },
{ id: "2", name: ", " }
]);
// Positions are animated and the items will smoothly glide to their new place
render(result, renderNode);
```
### iron-list
Although we wish it did, this element will not work with `` due to the virtualization. Maybe this can be fixed in the future.
### Automatic registration
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.
## Performance
The element is designed to avoid layout thrashing as much as possible by batching work into microtasks and to animation frame timing.
## License
MIT
${item.name}
`)}