abosch19 / svelte-fast-marquee

A lightweight Svelte component that harnesses the power of CSS animations to create silky smooth marquees.
https://svelte-fast-marquee-docs.vercel.app/
MIT License
42 stars 5 forks source link

Svelte Fast Marquee

A Marquee component for Svelte inspired by react-fast-marquee.

npm npm downloads npm license npm bundle size npm type definitions

demogif

Demo

Check out the demo here and play around with some sample marquees.

Installation

If you're using npm, in the command prompt run:

npm install svelte-fast-marquee --save

If you're using yarn, run:

yarn add svelte-fast-marquee

If you're using bun, run:

bun add svelte-fast-marquee

Documentation

You can find the documentation here.

Usage

To use the component, first import Marquee into your file:

import Marquee from "svelte-fast-marquee";

Then wrap the <Marquee> tags around any component or text you'd like to slide.

<Marquee>
  I can be a Svelte component, multiple Svelte components, or just some text.
</Marquee>

A sample file might look like this:

<script>
    import MyComponent from '../components/MyComponent';
    import Marquee from 'svelte-fast-marquee';
</script>
<Marquee>
    <MyComponent />
    <MyComponent />
    <MyComponent />
</Marquee>