Motion Core

Pointer

Image Trail

An interactive effect that spawns a trail of images following the cursor with scaling and rotation.

gsap

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add image-trail

Import the component

Import the component into your Svelte file: 
import { ImageTrail } from "$lib/motion-core";
import { ImageTrail } from "$lib/motion-core";

Usage

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

	const demoImages = [
		"/images/demos/sample-1.jpg",
		"/images/demos/sample-2.jpg",
		"/images/demos/sample-3.jpg",
		"/images/demos/sample-4.jpg",
		"/images/demos/sample-5.jpg",
		"/images/demos/sample-6.jpg",
		"/images/demos/sample-7.jpg",
	];
</script>

<ImageTrail
	images={demoImages}
	class="absolute inset-0 flex h-full w-full items-center justify-center"
/>

Props

ImageTrail

PropTypeDefault
images
string[] —
class
string ""
config
TrailConfig DEFAULT_CONFIG

TrailConfig

KeyTypeDefault
imageLifespan
number 600
removalTickMs
number 16
mouseThreshold
number 40
minMovementForImage
number 5
inDuration
number 600
outDuration
number 800
maxRotationFactor
number 3
baseRotation
number 30
speedSmoothingFactor
number 0.25
minImageSize
number 260
maxImageSize
number 340
staggerOut
number 40