npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

textformer

v1.5.0

Published

Easy text animations with random character changes.

Downloads

8

Readme

Textformer

Preview

Easy text animations with random character changes.

Demo

Installation

Via npm

npm install textformer --save
import { Textformer } from 'textformer';

Or manually import the minified build.

<script src="textformer.min.js"></script>

Basic usage


const demo = new Textformer({

	mode: Textformer.modes.EXPAND,
	from:   '', // Initial text
	to: 'Demo', // Final text
	steps:  20, // Number of character changes
	stagger: 3, // Stagger (in steps) between characters
	noise:   0, // Randomness added to steps & stagger
	speed:  15, // Number of character changes per second

});

Advanced options

Core

// Possible modes
mode: Textformer.modes.BASIC,
mode: Textformer.modes.REVERSE,
mode: Textformer.modes.EXPAND,
mode: Textformer.modes.COLLAPSE,
mode: Textformer.modes.SHUFFLE,

// Concatenated character pool
// Used for random character draws
charset: Textformer.charsets.UPPERCASE,
charset: Textformer.charsets.LOWERCASE,
charset: Textformer.charsets.DIGITS,
charset: Textformer.charsets.SYMBOLS,
charset: Textformer.charsets.ALL,
charset: 'abc',

// Character index the animation starts or ends from
// Depending on the mode
origin: 0, 

Output

Element to automatically write the text into.

// Valid DOM id selector
output: '#demo',

// Valid DOM class selector
output: '.demo', 

// HTML element
output: document.querySelector('demo'), 

// Any writeable object
// This will use its property 'textform'
output: {textform: 'demo'},

// window.console, for debugging
output: console,

Using a DOM element will automatically escape the output for HTML.
If this is not the desired behavior, you can output to a JS object and manually update a DOM element instead.

If outputing straight to the DOM, monospace fonts are recommended.

In some cases, the following CSS settings can help avoid word wrap / line break related visual bugs:

overflow-wrap: break-word;

word-wrap: break-word;
white-space: pre;

Autoplay

The animation is ran using a built-in basic player.
You can bypass this by setting autoplay to false, and then animate the textformer.progress from 0 to 1, using a custom requestAnimationFrame, GSAP etc...
Note that doing so will invalidate all playback related options, such as speed, delay, loop etc.

const demo = new Textformer({
	from: 'foo',
	to: 'bar',
	autoplay: false,
});

console.log( demo.text );     // Outputs: 'foo'
console.log( demo.progress ); // Outputs: 0
demo.progress = 1;
console.log( demo.text );     // Outputs: 'bar'

Animation

// Plays the animation automatically (see above).
autoplay: true, 

// Milliseconds to wait before playing
delay: 500,

// Overrides the speed option
// Use if you need a fixed duration
// Speed is usually more consistent
duration: 0,

// Play the animation backwards
reversed: false,

// Speed multiplier, useful for yoyo animations
reverseSpeed: 1.5,

// Milliseconds to wait before playing in reverse mode
// Useful for yoyo animations
// Uses regular delay if unspecified
reverseDelay: 1500,

// Times to repeat the animation
// Set to -1 for infinite loop
repeat: 0,

// Loops the animation indefinitely
// Shorthand for repeat: -1
loop: true,

// Toggles direction when reaching either end
yoyo: false,

Easing

The built-in player can add some basic easing to the animations.

easing: Textformer.ease.LINEAR, // Default
easing: Textformer.ease.CIRC_IN,
easing: Textformer.ease.CIRC_OUT,
easing: Textformer.ease.CIRC_IN_OUT,
easing: Textformer.ease.SINE_IN_,	
// Etc...
// Functions available: 
// SINE, CIRC, QUAD, CUBIC, QUART, QUINT, EXPO

Callbacks

Callback functions can be fired on specific conditions.

onBegin	  : () => console.log( 'animation starts' ),
onUpdate  : () => console.log( 'enter a new frame' ),
onChange  : () => console.log( 'the text changed' ),
onComplete: () => console.log( 'animation ends' ),

Events

Those two options allows for easy mouse control of the animation, using the built-in player.
This provides an easy way to play the animation forward on pointerenter / pointerdown, and reverse it on pointerleave / pointerup.

// For pointerenter + pointerleave
hover: true,

// For pointerdown + pointerup
press: true,

Align

Option to align from and to texts.
This is done by padding the shorter text to match the longer text's length, using a fill string.
For example, aligning "foo" on the right, with a 5 characters word, using "-", will give "--foo"

// Possible aligns
align: Textformer.align.NONE,
align: Textformer.align.LEFT,
align: Textformer.align.CENTER,
align: Textformer.align.RIGHT,

// Fill string used for aligning the texts
fill: ' ',   // Uses whitespace by default
fill: 'abc', // Will be repeated if too short (abcabc...)

Defaults

If you need a specific option to default to a specific value for all your Textformer instances, you can set it via the static property Textformer.defaults.

Textformer.defaults.steps = 15; // Steps will now default to 15

Build

If you only need a built textform to animate with another tween engine, you can use the static method Textformer.build( options ) instead of a regular constructor. It will invalidate any autoplay or event option, and return a basic Textform instance. You can then animate its progress property as you like.

const textform = Textformer.build( options );
textform.progress = 0.5;

Summary

With default values.

const demo = new Textformer({

	// Core
	mode: Textformer.modes.BASIC,
	from: undefined,
	to: undefined,
	steps: 5,
	stagger: 3,
	noise: 0,
	charset: Textformer.charsets.ALL,
	origin: undefined,
	output: undefined,

	// Align
	align: Textformer.align.NONE,
	fill: ' ',

	// Player
	autoplay: true,
	speed: Textformer.DEFAULT_SPEED,
	easing: Textformer.ease.LINEAR,
	delay: 0,
	duration: 0,
	reversed: false,
	reverseSpeed: 1,
	reverseDelay: undefined,
	repeat: 0,
	loop: false,
	yoyo: false,

	// Callbacks
	onBegin: undefined,
	onUpdate: undefined,
	onChange: undefined,
	onComplete: undefined,

	// Events
	hover: false,
	press: false,
	
)};

Kedan - 2021