Svelte Neomarquee

An event-driven and feature-rich marquee component for Svelte

svelte-neomarquee

An event-driven and feature-rich marquee component for Svelte.

Motivation

Existing marquee libraries either lack of features, customization or ease of use. Its goal is to start from svelte-fast-marquee and svelte-marquee and leverage the UX and customization possibilities.

Features

Highly customizable
Strongly typed
Event-driven
TailwindCSS-compatible

Installation

# pnpm
pnpm i -D svelte-neomarquee
# npm
npm i -D svelte-neomarquee
# bun
bun i -D svelte-neomarquee
# yarn
yarn add -D svelte-neomarquee

Usage

Props

Name	Type	Description	Mandatory	Default value
`play`	boolean	Whether the marquee should play	No	`true`
`playsCount`	number	The number of times the marquee should play (0 = infinite)	No	`0`
`speed`	number	The speed of the marquee, relative to its width/height	No	`100`
`direction`	`"left" \| "right" \| "up" \| "down"`	The direction of the marquee	No	`"right"`
`mode`	`"single" \| "multiple"`	Whether to repeat the slot content once or multiple times	No	`"multiple"`
`showGradient`	boolean	Whether to show a gradient on both ends; takes precedence over `showLeadingGradient` and `showTrailingGradient`	No	`false`
`showLeadingGradient`	boolean	Whether to show a gradient on the first edge; overwritten by `showGradient`	No	`false`
`showTrailingGradient`	boolean	Whether to show a gradient on the last edge; overwritten by `showGradient`	No	`false`

You can also pass:

style to add inline styles to the marquee container
class to add classes to the marquee container
any other prop, which will be passed to the marquee container

Additionally, you can bind clientWidth and clientHeight to get the width and height of the marquee container.

CSS variables

You can pass the following CSS variables through the style prop (or through class with TailwindCSS) to customize the marquee:

Variable	Type	Description	Mandatory	Default value
`--gap`	string	The gap between elements in the marquee	No	`0`
`--gradient-width`	string	The width of the gradient on both sides	No	`10%`
`--gradient-color`	string	The color of the gradient	No	`black` (`#000000`)

Events

Name	Description	Event `detail`'s parameters
`playstart`	The marquee starts playing	None
`playpause`	The marquee pauses playing (`play` set to `false` but animation not ended)	`progress`: the current progress, between 0 and 1 for each play
`playend`	The marquee ends its animation (only triggered on animation end if `playsCount` > 0)	None
`progress`	The current progress of the marquee, live-updated	`progress`: the current progress, between 0 and 1 for each play
`hoverstart`	The mouse enters the marquee	None
`hoverend`	The mouse leaves the marquee	None

Slots

Name	Description
-	Elements to show inside the marquee

Examples

Basic

<script>
    import Marquee from "svelte-neomarquee";
</script>

<Marquee>
    {#each Array(10) as _, i}
        <span>Element {i + 1}</span>
    {/each}
</Marquee>

Pause on hover

<script>
    import Marquee from "svelte-neomarquee";

    let play = true;
</script>

<Marquee bind:play on:hoverstart={() => (play = false)} on:hoverend={() => (play = true)}>
    ...
</Marquee>

Custom speed

<script>
    import Marquee from "svelte-neomarquee";
</script>

<Marquee speed={200}>...</Marquee>

Custom gradient

<script>
    import Marquee from "$lib";
</script>

<Marquee showGradient style="--gradient-color: red; --gradient-width: 200px">...</Marquee>
<!-- or with TailwindCSS -->
<Marquee showGradient class="[--gradient-color:_red] [--gradient-width:_200px]">...</Marquee>

License

MIT

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing