Flip Grid

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add flip-grid

npx @motion-core/cli add flip-grid

Import the component

Import the component into your Svelte file:

import { FlipGrid, FlipGridItem } from "$lib/motion-core";

import { FlipGrid, FlipGridItem } from "$lib/motion-core";

Usage

Props

Columns

Duration

0.500s

Stagger

0.100s

Ease

<script lang="ts">
	import { FlipGrid, FlipGridItem } from "motion-core";

	type Props = {
		columns?: number;
		duration?: number;
		stagger?: number;
		ease?: string;
	};

	const images = [
		"/images/photos/sample-image-8.webp",
		"/images/photos/sample-image-9.webp",
		"/images/photos/sample-image-10.webp",
		"/images/photos/sample-image-11.webp",
	];

	let {
		columns = 4,
		duration = 0.5,
		stagger = 0.1,
		ease = "power2.inOut",
	}: Props = $props();
</script>

<div class="relative h-full min-h-96 w-full">
	<div class="h-full p-4">
		<FlipGrid class="w-full gap-4" {columns} {duration} {stagger} {ease}>
			{#each images as src, i (src)}
				<FlipGridItem
					id={`img-${i}`}
					class="relative aspect-square w-full overflow-hidden rounded-lg shadow-md"
				>
					<img {src} alt="Demo {i}" class="h-full w-full object-cover" />
				</FlipGridItem>
			{/each}
		</FlipGrid>
	</div>
</div>

<script lang="ts">
	import { FlipGrid, FlipGridItem } from "motion-core";

	type Props = {
		columns?: number;
		duration?: number;
		stagger?: number;
		ease?: string;
	};

	const images = [
		"/images/photos/sample-image-8.webp",
		"/images/photos/sample-image-9.webp",
		"/images/photos/sample-image-10.webp",
		"/images/photos/sample-image-11.webp",
	];

	let {
		columns = 4,
		duration = 0.5,
		stagger = 0.1,
		ease = "power2.inOut",
	}: Props = $props();
</script>

<div class="relative h-full min-h-96 w-full">
	<div class="h-full p-4">
		<FlipGrid class="w-full gap-4" {columns} {duration} {stagger} {ease}>
			{#each images as src, i (src)}
				<FlipGridItem
					id={`img-${i}`}
					class="relative aspect-square w-full overflow-hidden rounded-lg shadow-md"
				>
					<img {src} alt="Demo {i}" class="h-full w-full object-cover" />
				</FlipGridItem>
			{/each}
		</FlipGrid>
	</div>
</div>

Props

FlipGrid

Prop	Type	Default
`children`	`Snippet`	`—`
`columns`	`number`	`undefined`
`class`	`string`	`undefined`
`style`	`string`	`undefined`
`duration`	`number`	`0.5`
`ease`	`string`	`"power2.inOut"`
`stagger`	`number`	`0`

FlipGridItem

Prop	Type	Default
`children`	`Snippet`	`—`
`id`	`string`	`—`
`class`	`string`	`undefined`