<script>
import { flip } from 'svelte/animate'
import { fade } from 'svelte/transition'
let startInt = 0
$:items = Array(5).fill().map((x,i) => i+startInt)
function shiftDown() {
startInt = startInt + 3
}
function shiftUp() {
startInt = startInt - 3
}
</script>
<a href="#" on:click|preventDefault="{e => shiftUp()}">up</a>
{#each items as item (item)}
<div
animate:flip="{{delay: 1000, duration: 1000}}"
in:fade="{{delay: 2000, duration: 1000}}"
out:fade="{{duration: 1000}}"
>
{item}
</div>
{/each}
<a href="#" on:click|preventDefault="{e => shiftDown()}">down</a>