svelte-marquee-text

[CSS GPU Animation] Marquee Text for Svelte

Demo

https://borakilicoglu.github.io/svelte-marquee-text

Install

npm install svelte-marquee-text-widget or yarn add svelte-marquee-text-widget

Usage

Import that in your App.svelte or similar file

import MarqueeTextWidget from "svelte-marquee-text-widget";

On your page you can now use html like this:

<!-- simple marquee text -->
<MarqueeTextWidget>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna.
</MarqueeTextWidget>

<!-- short text need more duplicates -->
<MarqueeTextWidget repeat="{10}">
  Short text =(
</MarqueeTextWidget>

<!-- slow duration -->
<MarqueeTextWidget duration="{30}">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna.
</MarqueeTextWidget>

Props