Press "Enter" to skip to content

Decoding, Decrypting, Scrambling Spelling Out Text | Glitched Writer

Glitched Writer is a lightweight npm module for writing text to HTML elements. Decoding, decrypting, scrambling, or simply spelling out text.

text reveal animation, text reveal animation js, sliding text reveal animation css, scramble text javascript, gsap scramble text, random text animation javascript

Features:

  • Manages text animation of an HTML element. Write, stop, play, add, remove and write more!
  • Highly customizable behavior. An array of options allow you to animate the text in a way that suits your design.
  • Added callback functions to fire on writer events (start, step, end).
  • The gw-finish custom event will be sent on the HTML element.
  • For design purposes, the writer attaches the gw-writing class to the HTML element and the data-gw-string attribute with the current string.
  • Handles html tags and html entities (eg <br/>, <a href=”#”>link</a>, &#59;, & amp;).
  • Can a character aggregate into many extension elements within the parent element?
  • written in Typescript.

How to make use of it:

1. Install and import the Glitched Writer.

# NPM
$ npm i glitched-writer --save
import GlitchedWriter from 'glitched-writer'

2. Create a new instance of the Glitched Writer.

const myWriter = new GlitchedWriter(
      '#container', 
      {
        // options here
      }, function(string, writerData){
        // finish callback
      }
)

3. You may also load the Glitched Writer JavaScript within the doc.

<script src="https://cdn.jsdelivr.net/npm/glitched-writer/lib/index.min.js"></script>
const myWriter = GlitchedWriter.create(
      '#container', 
      {
        // options here
      }, function(string, writerData){
        // finish callback
      }
)

4. Write your text with a Glitch effect.

// plain text
myWriter.write('Any Text');

// HTML content
Writer.write('<b>HTML Content</b>');

// queue writing
const phrases = ['First String', 'Second String', 'Last String']
// or from HTML elements
<div id="phrases" style="display: none;">
<p>Welcome!</p>
<p>to my site.</p>
</div>
// writer.queueWrite(phrases, queueInterval, loop)
writer.queueWrite(phrases, 3000, true);

// with await
const res = await Writer.write('Welcome');
console.log(`Finished writing: ${res.string}`);
console.log('All the writer data:', res);
await wait(1200);
await Writer.write('...to Glitch City!');

5. Available choices.

const myWriter = new GlitchedWriter(
      '#container', 
      {
        // step size
        steps: [1, 8],
        // interval
        interval: [60, 170],
        // delay
        delay: [0, 2000],
        // chance of letter being replaced by a glitched character
        changeChance: 0.6,
        // chance for ghost letter to appear
        ghostChance: 0.2
        // maximal number of ghosts to occur
        maxGhosts: '0.2'
        // boolean | number | 'word'
        oneAtATime: 0,
        // custom glyphs
        glyphs: '',
        // add letters from written text to the glyph charset
        glyphsFromText: false,
        // fill space or not
        fillSpace: true,
        // 'normal' | 'matching' | 'erase' | 'clear'
        mode: 'matching',
        // allows HTML
        html: false,
        // appends every letter of that text as a child span element
        letterize: false,
        // make the animation endless
        endless: false,
        // fps
        fps: 60,
      }
)

6. More API strategies.

// add text
Writer.add(text);

// remove text
Writer.remove(number);

// add callback
writer.addCallback('start', startCB);

// remove callback
writer.removeCallback('start', startCB);

7. It additionally comes with 9 presets:

const myWriter = new GlitchedWriter(
      '#container', 
      'terminal'
)

Text Glitch (Scramble) Animation, Glitched Writer Plugin/Github


See Demo And Download

Official Website(thetarnav): Click Here

This superior jQuery/javascript plugin is developed by thetarnav. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.