I need to apply a typewriter effect to an input placeholder.. this generalization is perfectly backward compatible and makes the task trivial. Tests are all green!

Adding the ability to bypass the queue system for advanced animations, particular case when you have two elements in the page that you want to sync, I couldn't find another way.

      const postTyper = malarkey(postEl, typerOptions);
      const receiveTyper = malarkey(receiveEl, {...typerOptions, loop: false});

      scope.vm.headlines.forEach((phrase) => {
        postTyper
          .call(function(el) {
            el.classList.add('has-cursor');
            this();
          })
          .type(phrase.post)
          .call(function(el) {
            el.classList.remove('has-cursor');
            receiveEl.classList.add('has-cursor');
            const self = this;
            receiveTyper._type(function() {
              self();
            }, phrase.receive, typerOptions.typeSpeed);
          })
          .pause(1000)
          .call(function() {
            [postEl, receiveEl].forEach(elem => elem.classList.add('highlighted'));
            this();
          })
          .pause(1000)
          .call(function() {
            const self = this;
            [postEl, receiveEl].forEach(elem => {
              elem.classList.remove('highlighted')
              elem.classList.remove('has-cursor');
            });
            receiveTyper._clear(function() {
              self();
            });
          })
          .clear()

The following code worked fine on 0.0.2:

  malarkey(el, opts)
    .clear()
    .type(initialText).pause(pause).delete(initialWord.length)
    .type('browsers').pause(pause).delete(8)
    .type('angular').pause(pause).delete(7)
    .type('bower').pause(pause).delete(5)
    .type('gulp').pause(pause).delete(4)
    .type('browserify').pause(pause).delete(10)
    .type('grunt').pause(pause).delete(5)
    .type('tessel').pause(pause).delete(6)
    .type('JavaScript').pause(pause)
    .type('.');

but when I installed 1.0.1, I see strange behavior. Instead of deleting the specified number of characters, it's deleting all characters in the element (incrementally, not all at once).

The real code is here: https://github.com/npm/newww/blob/b6206de7972714f69b17dfae053ad3ffd5dfba12/assets/scripts/what-npm-is-for.js#L19-L31

Hi @yuanqing.

I love this package. Thanks for creating it. I'm hoping to use it on the new npm website.

Can you publish the latest version to npm?

Thanks!

I want to call a function after everything is done:

malarkey(el, {})
  .type("foo").pause(1000).delete()
  .type('bar').pause(1000).delete()
  .end(function(el) {
    console.log(el.classList.remove("typing"))
  })

@yuanqing if you see an easy way to add this, I'd be grateful. Otherwise I can give it a try myself. :)

I have npm installed successfully, but when I run gulp I get this error:

malarkey* master » gulp
[22:20:53] Using gulpfile ~/code/forks/malarkey/gulpfile.js
[22:20:53] Starting 'lint'...
[22:20:53] Starting 'clean'...
[22:20:53] Finished 'clean' after 18 ms
[22:20:53] Starting 'dist'...
[22:20:53] Finished 'lint' after 112 ms
[22:20:54] Finished 'dist' after 380 ms
[22:20:54] Starting 'test'...
ERROR [config]: File /Users/z/code/forks/malarkey/test/karma.conf.js does not exist!

Using textContent instead of innerHTML fixes the bug when deleting HTML entities.

However, textContent raises the browser compatibility to IE9. An alternative is to use innerText which, however, ignore trailing white spaces, so more checks should be done.

There is a some annoying flickering effect when element content deletes. I prepared codepen for you. It can be easy fixed by css:

.malarkey {
    min-height: 20px;
}

But is it possible to implement this feature out of the box? Thank you.

If I insert the content 'Soda & Beers', the script won't be able to remove the content before & and hence 'Soda &' will get appended again and again. Here is an example: 'Soda & Soda & Soda & Beers'

malarkey.type('<strong>Hi</strong>'); literally types out <strong>Hi</strong>. Is it possible to write it out as a DOM element?

Would it be possible to have a highlight-then-delete feature for the word that is typed? Hubspot.com has this. The effect makes it looks like someone is highlighting the word that was typed and then deleting it.

It would be nice if this was available as an es module.

If you like, I'll make a PR which refactors to es6 and esm, and I'll add rollup to transform to cjs and minify