javascript / expert
Snippet
Optimized List Transitions with FLIP
Svelte provides a built-in 'flip' (First, Last, Invert, Play) animation directive. It calculates the delta between positions during reordering and applies high-performance CSS transforms to animate elements smoothly.
snippet.js
javascript
1
2
3
4
5
6
7
8
import { flip } from 'svelte/animate';import { quintOut } from 'svelte/easing';{#each items as item (item.id)}<li animate:flip={{ duration: 500, easing: quintOut }}>{item.label}</li>{/each}
svelte
Breakdown
1
{#each items as item (item.id)}
Keyed each block is mandatory for flip animations to track element identity.
2
animate:flip={{ ... }}
Applies the FLIP animation logic to the element.
3
easing: quintOut
Uses a quintic-out easing function for a natural, decelerating movement.