Svelte-ticker NPM

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

svelte

@infinitebrahmanuniverse/nolb-svelte-t @everything-registry/sub-chunk-2856

1.0.0

4 years ago