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

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
pauseOnHover	Boolean	false	The property specifies whether the animation should be paused when hovered over