svelte-flip

A simple, light-weight, flippable card component written with SvelteKit. The source code and an example can be found in this blog post.

SvelteKit packages are still experimental, this library will be updated as SvelteKit stabilizes.

Install

npm i svelte-flip

Usage

<script lang="ts">
    import Flippable from 'svelte-flip';
    let flip = false;
</script>

<button on:click={() => (flip = !flip)}>Flip!</button>
<Flippable height="337px" width="234px" {flip}>
    <img slot="front" src="/card-front.png" />
    <img slot="back" src="/card-back.png" />
</Flippable>