# scramble-text

> Free version of Greensock's Scramble Text like text shuffle effect.

Latest version **0.0.9** (published 2023-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install scramble-text
pnpm add scramble-text
yarn add scramble-text
bun add scramble-text
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2023-05-13 |
| First published | 2017-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 61 |
| Author | Yomotsu |
| Maintainers | yomotsu |

## Links

- npm: https://www.npmjs.com/package/scramble-text
- Repository: https://github.com/yomotsu/ScrambleText
- Homepage: https://github.com/yomotsu/ScrambleText#readme
- Issues: https://github.com/yomotsu/ScrambleText/issues
- npm.io page: https://npm.io/package/scramble-text

## Recent versions

- 0.0.9 (latest) — 2023-05-13
- 0.0.8 — 2017-05-15
- 0.0.7 — 2017-03-27
- 0.0.4 — 2017-03-25
- 0.0.3 — 2017-03-19
- 0.0.2 — 2017-03-19
- 0.0.1 — 2017-03-19

## README

# ScrambleText

Free version of Greensock's Scramble Text like text shuffle effect.

[![Latest NPM release](https://img.shields.io/npm/v/scramble-text.svg)](https://www.npmjs.com/package/scramble-text)
![MIT License](https://img.shields.io/npm/l/scramble-text.svg)

## demos

- [basic](https://yomotsu.github.io/ScrambleText/examples/basic.html)
- [idling](https://yomotsu.github.io/ScrambleText/examples/idling.html)
- [options](https://yomotsu.github.io/ScrambleText/examples/options.html)

## Usage

### as Standalone lib

Copy ScrambleText.js from /dist/ScrambleText.js and place it in your project.

```
<script src="./js/ScrambleText.js"></script>
```

### with NPM

```
$ npm install --save scramble-text
```

then

```
import ScrambleText from 'scramble-text';
```

### Applying effects

```html
<p id="text1">Scramble Text</p>
<button onclick="startFx()">start trigger</button>
```

```javascript
var element = document.getElementById( 'text1' );
var scrambleText = new ScrambleText( element ).play();

// you can start the effect whenever you want
function startFx() {

	scrambleText.start();

}
```

## APIs

### Constructor

```
ScrambleText( element, options )
```

### Options

| param        | required |     |
| ------------ | -------- | --- |
| `timeOffset` | optional | relay between each steps in millisecons |
| `chars`      | optional | array of custom characters |
| `callback`   | optional | function that is called when ended the effect |

e.g.
```javascript
var scrambleText = new ScrambleText(
	document.getElementById( 'text' ),
	{
		timeOffset : 200,
		chars: [
			'安','以','宇','衣','於',
			'加','幾','久','計','己',
			'左','之','寸','世','曽',
			'太','知','川','天','止',
			'奈','仁','奴','称','乃',
			'波','比','不','部','保',
			'末','美','武','女','毛',
			'也','為','由','恵','与',
			'良','利','留','礼','呂',
			'和','遠','无'
		],
		callback: function () { console.log( 'ended' ); }
	}
);
```

### Methods

- `play()`
- `start()`
- `stop()`

e.g.
```javascript
var element = document.getElementById( 'text1' );
var scrambleText = new ScrambleText( element ).start().play();
```

---
_Source: https://npm.io/package/scramble-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._