Animated and Sortable Web Component

Creating an animated sortable container is possible these days using purely built in functionality:

1) Sorting is provided by Flex Box's css 'order' property
2) Animation is provided by the ViewTransitions API
3) Web Components Slots allows us to add user defined content

In the demo we use LitElement and Typescript to create our WebComponent.

00:00 Intro
01:10 Install Lit and Typescript
01:40 Create LitElement CardSorter
03:00 Implement Render
03:30 Flex Box
05:00 Create Test Web Page
06:50 Add Attributes
08:10 Implement Sort
12:00 Animation (ViewTransitions)
14:00 View Result

Full implementation: