https://github.com/neolegends/dom-flip

🔀 Smooth position animation for web components.
https://github.com/neolegends/dom-flip

animation flip-animation list magic-move web-component

Last synced: about 1 month ago
JSON representation

🔀 Smooth position animation for web components.

• Host: GitHub
• URL: https://github.com/neolegends/dom-flip
• Owner: NeoLegends
• License: mit
• Created: 2017-07-27T12:29:29.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-11T16:18:08.000Z (over 6 years ago)
• Last Synced: 2024-10-05T11:01:15.126Z (about 1 month ago)
• Topics: animation, flip-animation, list, magic-move, web-component
• Language: TypeScript
• Homepage:
• Size: 45.9 KB
• Stars: 8
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \

[![Build Status](https://travis-ci.org/NeoLegends/dom-flip.svg?branch=master)](https://travis-ci.org/NeoLegends/dom-flip)

[![Greenkeeper badge](https://badges.greenkeeper.io/NeoLegends/dom-flip.svg)](https://greenkeeper.io/)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/NeoLegends/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.



    



## Installation

This element lives on npm. Install with `yarn add dom-flip` or `npm install --save dom-flip`.

## Usage

You can use this element together with any element that modifies the DOM. The animated elements must be direct children of the `dom-flip` element.

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).

### Polymer's dom-repeat:

```html

    

    

        

            [[item.name]]

        

```

### lit-html:

```ts

const template = (items: { id: string, name: string }[]) => html`

    

        ${items.map(item => html`
${item.name}
`)}

    

`;


// 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