```js // @noErrors import { flip } from 'svelte/animate'; ``` ## flip 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/). <div class="ts-block"> ```dts function flip( node: Element, { from, to }: { from: DOMRect; to: DOMRect; }, params?: FlipParams ): AnimationConfig; ``` </div> ## AnimationConfig <div class="ts-block"> ```dts interface AnimationConfig {/*…*/} ``` <div class="ts-block-property"> ```dts delay?: number; ``` <div class="ts-block-property-details"></div> </div> <div class="ts-block-property"> ```dts duration?: number; ``` <div class="ts-block-property-details"></div> </div> <div class="ts-block-property"> ```dts easing?: (t: number) => number; ``` <div class="ts-block-property-details"></div> </div> <div class="ts-block-property"> ```dts css?: (t: number, u: number) => string; ``` <div class="ts-block-property-details"></div> </div> <div class="ts-block-property"> ```dts tick?: (t: number, u: number) => void; ``` <div class="ts-block-property-details"></div> </div></div> ## FlipParams <div class="ts-block"> ```dts interface FlipParams {/*…*/} ``` <div class="ts-block-property"> ```dts delay?: number; ``` <div class="ts-block-property-details"></div> </div> <div class="ts-block-property"> ```dts duration?: number | ((len: number) => number); ``` <div class="ts-block-property-details"></div> </div> <div class="ts-block-property"> ```dts easing?: (t: number) => number; ``` <div class="ts-block-property-details"></div> </div></div>