tameemsafi / typewriterjs Goto Github PK

Thank you for the plugin, it';s a good one, doing the job that others don't.
I got a few suggestions for you.
Consider removing the developer mode and also all the console errors for myself using it means i want the smallest possible file size to add in the project and all those messages even if they are useful if you are not doing something correctly you have a documentation for it and people will figure things out and removing those things will reduce the file size.
Adding an option for the delay between the end of deleting the string and starting to write again, right now i see you add a random delay that it can't be controlled, i wanted no delay between deleting and starting again over a preset list of strings, i was simply initiating it with the strings as options from the start.
Another thing would be to remove the cursor animation from the javascript and let people use a css option. This does the job
@Keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.typed-cursor{
opacity: 1;
animation: blink 1s infinite;
}

I noticed that typewriterjs fails to load on older devices such as my iPhone 5 running iOS 10.3.4.
Newer iPhones seem to be working (tested in iOS simulator).
Is it possible to define some fallback HTML for this situation?

Hi, I am currently using the Typewriterjs for animated header.
I was wondering if there is a way to remove or in the least pause the blinking cursor once it finishes playing. Tried using the changeSetting method but that doesn't seem to work either.

Am I doing something wrong?

 var typewriter = new Typewriter(app, {
     loop: false,
     blinkSpeed: 35
 });


 typewriter.typeString('Testing Testing Testing')
     .pauseFor(3500)
     .changeSettings({ "animateCursor": false })
     .start();

Thank you in advance

Uncaught ReferenceError: Typewriter is not defined
at typewriter.js:11

Not sure whats going on here, could you pls help me? Thank you

Hey there,

Currently messing around and loving this package right now.

I was just working on something small and I wanted to make text appear instantly using the typewriter library. Splitting the typewriter call with jQuery hasn't worked either.

Would love it if there was a .StringShow() or .AppearString() just instantly display the string rather than type it out.

Hope this isn't too much to add, would love to see it!

Hi, first of all, thank you for this component. It is very easy to use.

My issue is after I updated my dependencies to their latest releases, I can't start the development server. The error is as follows;

Failed to compile.
./node_modules/typewriter-effect/dist/react.js
Cannot find file: 'index.js' does not match the corresponding name on disk: './node_modules/React/react'.

I researched a bit and found this issue in webpack repo The suggestion seems to edit the externals property in webpack config. I think react: "React" causing this issue.

Older versions are working fine. 2.8.2 seems to have this problem.

How to use it with React? Like this site https://wild.as/, thanks!

It seems that the deleteSpeed property is missing / not used in the React component. Is this on purpose or just a bug?

Hi there, nice tool you have made here. I found that the option that is referred to as typingSpeed on your website is actually called delay in the code itself. Since you still seem to be updating this I thought you might want to keep the documentation current.

The example from https://jsfiddle.net/shbqy0mv/9/ is not working correctly in Internet Explorer 11.

typewriter.typeString('<strong>Human: </strong>')
  .typeString('Hello how are you?')
  .pauseFor(2500)
  .typeString('<br/>')
  .typeString('<strong>Bot: </strong>')
  .typeString('I am fine thanks, how are you?')
  .pauseFor(2500)
  .typeString('<br/>')
  .typeString('<strong>Human: </strong> ')
  .typeString('I am great!')
  .pauseFor(2500)
  .start();

<br/> tags get lost and all strings are displayed in one line :/ Unfortunately I don't see an error message in the developer tools.

Do you have an idea how to solve it?

Hi i want to know how to change the typing velocity, no the deletion one

I am trying to write a string followed by erasing it and than writing it again in a loop. However, I have noticed the time delay between each individual loops keep increasing. The first loop takes almost no seconds. The second loops takes a bit longer, the third takes even more longer and so on... Here is the code:

  new Typewriter(app, { loop: true })
    .typeString("Hello World!")
    .pauseFor(250)
    .start();

I have managed to work around this by exploiting the callback feature. Here is the code:

  (function callBack() {
    new Typewriter(app)
      .typeString("Hello World!")
      .pauseFor(250)
      .deleteAll()
      .start()
      .callFunction(callBack);
  })();

I hope we can track down the root issue for this.

Updated: Following is the cdn I am using:

how to set up fast animation typing?

Hello, thank you very much for the plugin, very useful.

I assume this is a feature request. I would like to be able to loop without deleting, to achieve appending random text to an already written element within the TypewriterJS object.

Something such as:

var sentences = ['this first sentence', 'this second sentence', 'this third sentence', 'etcétera']

var type = new Typewriter(el, {
  loop: true,
  deleteAll: false /* for example */
});      

type
  .pauseFor(500)
  .typeString(sentences[Math.floor(Math.random() * sentences.length)])
  .start();

This can be achieved now by wrapping the queue within a setInterval function, tho.

Thank you

Is it possible to have a static text variable which will not be deleted? I couldn't find any examples and simply prepending a <span> my static text </span> results in a typing animation which starts from the right-to-left instead of the usual left-to-right.

See this example - https://www.tmeyer.info

I want to suggests query search into a search input. Any idea?

Tested using Chrome v70.0.3538.102 (64 bits) and Microsoft Edge v42.17134.1.0

Hi!
Testing the plugin today i discovered what it seems to be a bug. On every cycle the pause time between texts increments like 500ms more...

Hihi,

There was a closed issue that somewhat relates to this: #13

The callFunction((state) => ....) solution that was suggested in the above issue does not seem to work for me. Below is the snippet/context of the code that I'm using it in:

  typewriter.typeString("Hi there, what's your name?")
    .callFunction((state) => {
      state.elements.cursor.style = 'none';
    })
    .start();

On that note, just wondering if you would be open to adding a CHANGE_CURSOR event? Willing to look into/raise a PR for this.

Thanks!

Hi @tameemsafi , don't know if you noticed but your demo site is currently down.

Is there any way to clear/reset the typewriter to its initial state? I want to be able to interupt it an restart if from the beginning. Possible?

I saw you response to this other similar issue.

Following the advice there, I set the innerHTML to an empty string, but no matter what I do, the chain seems to break. Am I doing something wrong?

I have found an issue with deleteAll in Internet Explorer 11. When I apply deleteAll(), it's just ignored and the next string is just appended. In the developer tools, there is an error like Object doesn't support property or method 'remove'.
I could even reproduce it in this example: https://jsfiddle.net/mv612vrf/1702

Do you have an idea how to solve it?

https://www.npmjs.com/

is there a function if the typewriter has ended or stopped?

Description
I have tried to add emoji to labels that I want to type via Typewriterjs and they are rendered in a weird way. Here is my component init:

const titles = [
    'Test 🛠', 
    'Test 2 🛒🐹🧔', 
]

<Typewriter options={{
   strings: titles,
   autoStart: true,
   loop: true,
}}>

Expected Result
Emoji is rendered right away without showing unknown char symbol like letters.

Actual Result
Emoji is rendered in a way when the unknown char symbol is shown firstly and then the actual emoji is rendered. This is a frustrating experience:

Is it possible to fix somehow?

is there a way that we can control the speed of deleteAll()

Hello people from typewriterjs, I'm working on a project in which I have a string like: "Hello?! Hello! Can you hear me? If you can read this message, please hit next in the lower right to let me know if I am not just talking to myself!"

The message will stop typing after the strong lines are done. If i put strong lines like in the middle it will just stop working at all. Do you have a solution for this?

Thanks for this library, I really like it.

Could you document the missing options, like stringSplitter and whatever else is missing in the documentation for your API? That would be awesome.

Hi,

I've just copy/past the basic example in codepen, and it's actually displaying tags as string and not interpreting them as tag. What's the issue?

typewriterjs is blazing fast, but for hero header I want to start with some text in my node already and instantly trigger delete animation via .deleteAll(). Tried this, but it won't work as expected (cleaned markup on init):

new Typewriter('#typewriter', {
  loop: true,
}).pauseFor(2500)
    .deleteAll()
    .typeString('Strings can be removed')
    .pauseFor(2500)
    .deleteChars(7)
    .typeString('<strong>altered!</strong>')
    .pauseFor(2500)
    .start();

Ideally it should be configurable via init params (even more ideally with pause interval between strings) as startFromDelete or so. Like starting with some text in node, initiating with same text as first of strings and skipping initial "typing" part.

There is no speed adjustment of words typing.

So, here's the situation ...

While the application is running in development mode and installing this package via another terminal window, it works great, exactly like you want it.

However, once you stop the server and try to "npm run dev" once again, it breaks the app, and it gives this error ...

I tried this multiple times just to be sure, with every time completely deleting the "node_modules" folder and starting fresh.

Your project is still having issues on Internet explorer 11,
"Unable to get property 'removeChild' of undefined or null reference"
I've tested one of you're examples and it's also not working on IE11 (chatbot example)

Hi guys,

Firstly like to say thanks for this awesome script. I am a total programming noobie but I am trying to achieve a certain effect with the typewriter where you hover over an element and will write something out.

I have got it working for the most part where it will make a new instance using the js mouseenter event but its susceptible to glitching and spazzing out when it is spammed. It will just keep firing a new instance and pile up tying gibberish (due to delays, combined strings etc). I have attempted to set a timerOut/Clear on it but couldn't get it going.

I realise this isn't issue directly with the script, just wondering if there is a better way to go about it (eg argument to kill/restart current typewriter) again sorry I am a total noob learning as I go. Thanks in advance!

Thanks a lot for this plugin

I was looking to add delete speed functionality and realized it was already in the code, just not mentioned in the docs.

Cheers

I tried adding the
tag and it didn't work, then I tried using the strong tag and that failed. I am unsure whether its my fault or it's the code which is facing errors.

Example:
.typeString('and
this is my Portfolio')

We're able to use fontawesome icons in TypewriterJS, which is absolutely fab, however any text after the icon is not displayed for some reason

e.g.

.typeString('We think TypewriterJS is just fab and <i class="far fa-heart"></i> all the features and options')

will render

We think TypewriterJS is just fab and ♡

and omit "all the features and options"

​
PS using CDN: unpkg.com/typewriter-effect/dist/core.js

Hi, thanks for this plugin!

I’m currently using it in a project of mine where the strings to be typed can change before the animation has finished. The way this plugin works now, it finishes the original string, then executes the scheduled "deleteAll" and then types the new string. It would be great if you could add a method to "flush" all changes out of the queue, allowing the "deleteAll" to be handled as soon as it is requested and not after the animation has run.

I hope it’s clear what I mean. Cheers and thanks again!

When I use the changeDelay option to modify the speed of the typing effect, nothing appends, whatever the value is

I need html typing support.
Thanks

I have this functional component:

import React, { useEffect } from 'react'
import Typewriter from 'typewriter-effect/dist/core'

export default function Introduction(props) {
  let headers = ["header1", "header2", "header3"];
  let subheaders = ['sub1', 'sub2', 'sub3']
  let typingSpeed = 10;
  let deleteSpeed = 1;
  let pauseDelay = 3000;
  
  useEffect(() => {
    let typewriter1 = new Typewriter('#typewriter1', {
        loop: false,
        delay: typingSpeed,
        deleteSpeed: deleteSpeed,   
        autoStart: true,
      }
    );
    
    let typewriter2 = new Typewriter('#typewriter2', {
        loop: false,
        delay: typingSpeed
      }
    );

    function subtyping(string) {
      typewriter2
          .typeString(string)
          .start();
    }

    function subdelete() {
      typewriter2
          .deleteAll(1)
          .start();
    }

    headers.forEach((header, i) => {
      typewriter1
          .typeString(header)
          .callFunction(() => subtyping(subheaders[i]))
          .pauseFor(pauseDelay)
          .callFunction(subdelete)
          .pauseFor(subheaders[i].length * deleteSpeed)
          .deleteChars(header.length)
    });

  }, []);

  return ( 
    <span id="typewriter1"></span>
    <span id="typewriter2"></span>
  );
}

This results in two blinking cursors. Why doesn't it start typing out my headers/subheaders?

Working
`<Typewriter
options={{
strings: [
"test1","test2","test3"
],
autoStart: true,
loop: true,

      }}/>`

Not Working
`
<Typewriter
options={{
strings: this.props.typewriter,
autoStart: true,
loop: true,

      }}/>`

I think the lib is really small, portable yet so powerful. But i think it will even be more powerful if you guys add a feature that could clear/reset the event loop queue.

First off I really like the package. Great job to everyone who has worked on it. I was wondering if it was possible or would it be possible to add a feature to clear the text managed by the typewriter immediately rather than having to use a delay.

If there is a lot of text on the screen, it can take a really long time to delete it all before the new text can be shown to the user.

For example, I'm using the project to create a terminal like effect in a web browser and there can be a ton of text already from previous user actions. It would be nice if this text could be removed immediately rather than making the user sit there and watch it all be deleted.

Thanks.

Would be great to have the Chance of registering callbacks in a fluent manner alter each string is written for example.
Would be great for guided walk throughs on a website.

Considering it making async also with promises.

I want to have it on the same line as other text like this:

<h1 className="welcome-tag">
          I am a{" "}
          <span className="changing-word">
            <Typewriter
              options={{
                strings: ["photographer.", "programmer.", "student."],
                autoStart: true,
                loop: true,
                cursor: "|"
              }}
            />
          </span>
        </h1>

Hi !

Unfortunatly it doesn't work with jQuery :/
In the console log it give me this error :

core.js:1 Uncaught TypeError: r.state.elements.container.appendChild is not a function
at t.setupWrapperElement (core.js:1)
at t.value (core.js:1)
at new t (core.js:1)
at magie.html:57

Hi,

I have a problem close to the last issue openned on the project:

I am using the function deleteChars(4), but it appears that the number of chars deleted is increasing on every cycle of the loop.
The first time, I have well 4 chars removed. The second time (second loop execution), 8 chars are removed (2x4). The third time, 12 are removed (3x4), ...

Any idea about that ?

Thanks !

Hey @tameemsafi,

I'd like to host your library, typewriterjs on cdnjs — It is one of the most famous free and public web front-end CDN services which is used by ~1,143,000 websites worldwide.

• The git auto-updater for cdnjs relies on git tags to recognize a release version and automatically update the library in the cdnjs repo.
• We also need to know what license your project comes under so we can mention it appropriately.

If it's not too much to ask, can you please do the following:

• Add git tags for this repository
• Add the license of your project to the repository (e.g. MIT, Apache-2.0, etc.)