paulomelojunior / scramble-text

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

ScrambleText

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

demos

• basic
• idling
• options

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

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

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.

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

Methods

• play()
• start()
• stop()

e.g.

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