svelte-ticker

Svelte Ticker for Svelte 3 demo

Simple Svelte component which automatically makes its contents scrollable ticker-style if it's necessary. Looks like html <marquee> tag but much better. Can be useful for such things like News Tickers etc.

Features

• 4 directions
• duration & delay
• responsive
• infinity or exact looping
• pausing on hover

Install

npm i svelte-ticker --save-dev

yarn add svelte-ticker

CDN: UNPKG | jsDelivr (available as window.Ticker)

Usage

<Ticker>
    <strong>Your very long string here or even html elements</strong>
</Ticker>
 
<script>
    import Ticker from 'svelte-ticker';
</script>

If you are not using using es6, instead of importing add

<script src="/path/to/svelte-ticker/index.js"></script>

just before closing body tag.

API

Props

Name	Type	Description	Required	Default
direction	String	Possible values: 'left', 'right', 'top', 'bottom'	No	left
duration	Number	Animation duration in seconds	No	30
delay	Number	Delay before animation goes in seconds	No	0
loop	Boolean / Number	Determines should the animation be looped or played number the times.	No	true
pausing	Boolean	Determines should the animation be paused on hover	No	true
alternate	Boolean	Determines should the animation be played forwards first, then backwards	No	false
behavior	String	Possible values: 'auto' and 'always'	No	auto

License

MIT © PaulMaly