Document svelte/animate - flip.

site/content/docs/03-run-time.md

@@ -506,13 +506,51 @@ TODO
 * fade, fly, slide, scale, draw
 * crossfade...
 
-### `svelte/animation`
+### `svelte/animate`
 
-TODO
+The `svelte/animate` module exports one function for use with svelte [animations](docs#Animations).
+
+#### `flip`
+
+```sv
+animate:flip={params}
+```
+
+The `flip` function calculates the start and end position of an element and animates between them, translating the `x` and `y` values. `flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/).
+
+`flip` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below
+* `easing` (`function`, default [`cubicOut`](docs#cubicOut)) — an [easing function](docs#svelte_easing)
+
+
+`duration` can be be provided as either:
+
+- a `number`, in milliseconds.
+- a function, `distance: number => duration: number`, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element.
+
+---
+
+You can see a full example on the [animations tutorial](tutorial/animate)
+
+
+```html
+<script>
+	import { flip } from 'svelte/animate';
+	import { quintOut } from 'svelte/easing';
+
+	let list = [1, 2, 3];
+</script>
+
+{#each list as n (n)}
+	<div animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
+		{n}
+	</div>
+{/each}
+```
 
-* TODO this doesn't even exist yet
 
-TODO
 
 ### `svelte/easing`