svelte-marquee-text-widget

svelte-marquee-text-widget

[CSS GPU Animation] Marquee Text for Svelte

Demo

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

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 -->
<marquee-text-widget>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna.
</marquee-text-widget>

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

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

Props

Prop	Type	Default	Description
duration	Number	15	Animation Duration
repeat	Number	2	Number of repeat the Slot (It's important for to short content)
paused	Boolean	false	The property specifies whether the animation is running or paused