Infinite Gallery

Installation

Install the component

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

npx @motion-core/cli add infinite-gallery

Import the component

Import the component into your Svelte file:

import { InfiniteGallery } from "$lib/motion-core";

import { InfiniteGallery } from "$lib/motion-core";

Usage

<script lang="ts">
	import { InfiniteGallery } from "motion-core";

	const images = [
		"/images/demos/sample-8.jpg",
		"/images/demos/sample-9.jpg",
		"/images/demos/sample-10.jpg",
		"/images/demos/sample-11.jpg",
		"/images/demos/sample-12.jpg",
		"/images/demos/sample-13.jpg",
		"/images/demos/sample-14.jpg",
		"/images/demos/sample-15.jpg",
	];
</script>

<InfiniteGallery
	class="h-full min-h-96 w-full"
	{images}
	speed={1.5}
	visibleCount={10}
/>

Props

ImageTrail

Prop	Type	Default
`images`	`ImageItem[]`	`—`
`speed`	`number`	`1.0`
`visibleCount`	`number`	`8`
`fadeSettings`	`FadeSettings`	`Default Fade`
`blurSettings`	`BlurSettings`	`Default Blur`
`class`	`string`	`""`

Fade Settings

Key	Type	Default
`fadeIn.start`	`number`	`0.05`
`fadeIn.end`	`number`	`0.25`
`fadeOut.start`	`number`	`0.4`
`fadeOut.end`	`number`	`0.43`

Blur Settings

Key	Type	Default
`blurIn.start`	`number`	`0.0`
`blurIn.end`	`number`	`0.1`
`blurOut.start`	`number`	`0.4`
`blurOut.end`	`number`	`0.43`
`maxBlur`	`number`	`8.0`