Motion Core

Marquee

Marquee is a robust infinite scrolling container that dynamically reacts to scroll velocity and direction. Built with GSAP, it speeds up on scroll and seamlessly loops content for a smooth, continuous flow.

Installation

Install the component

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

Import the component

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

Usage

Microsoft
Amazon
Netflix
YouTube
Instagram
Uber
Spotify
Microsoft
Amazon
Netflix
YouTube
Instagram
Uber
Spotify
<script lang="ts">
	import { Marquee } from "motion-core";

	const companies = [
		"Microsoft",
		"Amazon",
		"Netflix",
		"YouTube",
		"Instagram",
		"Uber",
		"Spotify",
	];
</script>

<div
	class="flex h-full min-h-96 w-full flex-col items-center justify-center gap-4"
>
	<Marquee
		class="h-fit"
		gap={32}
		duration={20}
		velocity={1}
		scrollElement="#docs-content-container"
	>
		{#each companies as company (company)}
			<div class="flex items-center text-4xl font-medium">
				{company}
			</div>
		{/each}
	</Marquee>

	<Marquee
		class="h-fit"
		gap={32}
		duration={20}
		velocity={1}
		reversed
		scrollElement="#docs-content-container"
	>
		{#each companies as company (company)}
			<div class="flex items-center text-4xl font-medium">
				{company}
			</div>
		{/each}
	</Marquee>
</div>

Props

Marquee

PropTypeDefault
duration
number 5
velocity
number 0.5
repeat
number 3
class
string ''
gap
number 32
reversed
boolean false
scrollElement
string | HTMLElement undefined