Is it possible to trigger the animation to start by clicking a link? I have a second page that I want to reveal by clicking a menu option, but when I click it the animation has already taken place. So I'm wondering if I can trigger it to start when the link is clicked?

Heres a basic version - JSFiddle

First off -- excellent plugin!

It would be great if there was a way to turn off the blinking cursor either upon completion (maybe after a slight delay) or programmatically via .tiSettings().

The blinking cursor is quite expensive (uses a lot of cpu) and while it looks great during the text animation, it is largely just wasting resources at the end.

Another option would be to allow an api or something to actually destroy the tracking on the element (but leaving the contents as is). That way once things are complete, there are no resources dedicated to them.

Thanks!

Add a simple build step on travis to show the people that the package has no errors.

Hey, i keep getting this error, but cant figure out what its complaining about:
typeit.js:368 Uncaught TypeError: t.el.find(...).fadeTo is not a function

im storing my string in my html file and following the steps.

all i have in my .js file is:
$('.line1').typeIt({
});

thanks in advance!

hi Alex,

there is one problem with .tiDelete():

i wrote this code:
.tiType('dort wo es zählt')
.tiPause(2000)
.tiDelete()

and .tiDelete is not working in this case. its just fade to the next .tiType without the delete effect.

please help :)

thanks

How can I run the callback function after each string typed rather than after the whole collection has been typed?

.. insn't working for me. Any idea to solve this?

Remove dist folder from to git as it is a file automatically generated and we don't need to keep track of them. In that way would be possible to keep the pull requests more clean. To accomplish this just add the dist folder to the gitignore file and add a files property to the package.json specifying the files to be included in the package when download it from npm. Right now all the repo is included.

I would be happy to send a pull request.

Do something inspired on awesome projects out there like atom. I personally use a simplified version of these guidelines in my projects.

I would be happy to send a pull request.

Is there anyway to CSS or HTML style a string when you use the .tiType() function? The project I'm working on is nearly all text and animation and I need to find a way to style individual words in a string.

I can style the whole sentence with the <h1> tag but a need it to be down to the word really.

So for example, in this snippet, I need the "(C) & (P)" and "version 1.0" a smaller font than the other words, so it would look like this as HTML:

<h1>PEUR - EXPLORER <span style="font-size: small;">(C) & (P)</span> \ <span style="font-size:small;">version 1.0</span><h1>

Heres the current code:

<h1 id="title"></h1>

$('#title').typeIt({ speed: 25, autoStart: false, cursor: true }) .tiType('PEUR - EXPLORER (C) & (P) \ version 1.0')

You've made a typo!
its typeIt not typeit.
However on Github you've displayed it as typeit!
Just saying this because it took me a while to realize, great plugin though 👍

hi,
how can i loop strings?

Thanks for the awesome lightweight plugin. It would be best if there is a option for looping string.

how do i append text for all/one string?

[text] typed text
[text] typed text
[text] typed text

[text] typed text
typed text
typed text

Activating type-it in a paragraph there is a delay with the padding that "worse" overview of the web when it finishes loading.

Example: https://diviunlimited.com/demos/minimal/

Any way you could get typeit on a CDN? Just about to install it on of my sites now.

Great job and thanks in advance,

Theo

Hello,

It's possible to remove letters with the same effect when writing?

Ex:
We love lorem ipsum (write all sentence)
We love (remove "lorem ipsum")
We love foo bar (write "foo bar")

Thanks and keep up the excellent work

Is it possible to fix this?
Here are the screenshot

Hi,

I want a method to pause the animation after the string completion, and a method to resume animation to next string.

Thanks e sorry the bad english.

webpack2 config is below.

const path = require('path');
const webpack = require('webpack');
module.exports = {
    context: path.resolve(__dirname, './'),
    entry: {
        app: ['./public/js/main.jsx']
    },
    output: {
        path: path.resolve(__dirname, './public/js/'),
        filename: 'main.js'
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({debug: true}),
        new webpack.ProvidePlugin({jQuery: 'jquery', $: 'jquery', jquery: 'jquery'})
    ],
    module: {
        rules: [
            {
                test: require.resolve("typeit"),
                loaders: ['imports-loader?jQuery=jquery,this=>window'],
                exclude: /(node_modules|bower_components)/
            }, {
                test: /\.(js|jsx)$/,
                use: ['babel-loader'],
                exclude: /(node_modules|bower_components)/,
                // use: ['react-hot-loader','babel-loader']
            }
        ]
    }

};

This is how I am including. I also tried import.

require("typeit")

This combination doesn't work. I

The package.json file mentions "General Public License", though it's not obvious to me which license this is. Is this a reference to the GNU General Public License? If so, what version? The NPM docs recommend using the SPDX license identifier to make this more clear for the user.

I have some code:

'use strict';

var words = ["developer", "designer", "problem solver", "hard worker", "nice guy!"];
var index = 0;

$("#about h3").typeIt({
strings: "I’m Geoff and I’m a " + words[index],
startDelay: 1500,
speed: 100,
loop: true,
autoStart: false,
callback: function() {
index++;
}
});

I'm trying to write a sentence that has a different word in it each time it's written. The problem is that the callback function doesn't execute if the loop option is set to true, so it just re-writes the same sentence over and over. I've tested it and it seems that when the loop option is set to false the callback works fine.

Is there a better way of achieving this effect?

Add editorconfig to keep a consistent coding style in the project.

See my personal editorconfig as example.

I would be happy to send a pull request.

I am expecting this library to bind jQuery instance on runtime. Because at the time i actually requests it - it present already. I am referencing jQuery with async, and this library with async defer attributes.

And sometimes, depending on connection conditions, because this library smaller, it got loaded first, and execution aborts. Not jQuery is present.

I am unable to get this usable without bulky requirejs. Outdated readme suggests use blocking mode (sic!).

Update readme to respect the standard-readme spec.

I would be happy to send a pull request.

If you have different HTML tags and have TypeIt type them on separate lines, the cursor does not follow the text. Please see the example:
https://jsfiddle.net/Lss4yoqg/

It would be nice to have a feature that would work in conjunction with breakLines: false where the script would only delete the last chars that are different from the previous string.

Example:

$('.type-it').typeIt({
    strings: ['I am a Jedi', 'I am Obi wan Kenobi'],
    breakLines: false,
    keepChars: true //suggested setting
});

Would first output "I am a Jedi" then delete only "a Jedi" then type "Obi wan Kenobi"

(Probably NOT an issue, but a difference between expected and actual behaviour)

I am using typeit to write text that when clicked, asks typeIt to write another text.

All texts are written in the same div. So when text1 is clicked, text2 overwrites it.

BUT, if text1 is clicked BEFORE it has been typed completely, AND there is a callback, it seems to be executed, WHILE text2 is being typed.

The expected behaviour would be that launching a 2nd typeIt call would completely stop a 1st typeIt call, including the callback.

I guess this is not really what is happening.

Would there be a way to completely abort a typeIt call, to be sure this does not happen?

thanks

Hi Alex,
I'm just starting out with web dev, so I'll try my best to explain!
When I use the h1, h2, etc. tags, it creates some weird padding problems. It would create unnecessary padding when there is a new line. The cursor also starts out at the beginning of the next line, not at the end of the current line that is being typed out.
This is what it would do:

This is the code:

               <script>
			var firstLine = "<h1>Hi, I'm <strong>John Tran</strong></h1>";
			var secondLine = "<h2>Developer | Engineer | h@ck3r</h2>";
			$('.type-it').typeIt({
				strings: [firstLine, secondLine]
			});
		</script>

I went around this by deleting the tags and using css to change the font size. It works perfectly now. http://johntran.me is the website that I'm working on with this.
I haven't tried using other tags like p1, but once I got the css working, so I didn't really bother.
Even though I went around this, I just wanted to bring this problem up! Thank you!

When using the advanced functions (i.e: tiType(), tiPause() etc), I had trouble getting them to work. I have since realised that I was using an outdated CDN (v3.0.1) that is displayed on the demo page of your plugin on unheap.com.

Here is the link

Just so you know :)

Can we build this in?

I am so sorry to throw a trouble, but that's what I got.

I was using the TypeIt in version 3.0.0, and I found that the callback function was never triggered. (The loop option already set as false.)

Tested browser:

• Firefox 43.0.4
• Chrome 48.0
• Safari 9.0.3

on OS X Yosemite(Macbook Air).

With both the *.min.js and *.js tested.

I was wondering why. Thank you.

Hey Alex,

typeit doesn't work when I try to do a link with double quotations. For example,
<a href="link">blah</a> stops it from working. However, if I use single quotations, it works fine.

typeit doesnt work with input elements...

Cursor character is currently a pipe character: |. Would like the ability to customize it to be a Unicode half block character to simulate the cursor on a Bash terminal: ▌

I think it would be super easy to make this a config option

http://www.fileformat.info/info/unicode/char/258c/index.htm

I'm trying to make it to display the strings randomly. Would love to know if this is something possible to do 😄

I'm using the breakDelay property set to 4000 (or 4 seconds), yet the deleting just continues on without any delay. Quite confused as to why this is.

    $('.translation').typeIt({
        strings: ['hi', 'hello', 'bonjour'],
        cursor: false,
        loop: true,
        deleteSpeed: 200,
        speed: 200,
        lifeLike: true,
        breakDelay: 4000,
        breakLines: false
    });

Is there any way to ask the plugin to finish writing the text immediately?
Any suggestions on how to implement this in the plugin code?
thanks

It's possible to chain several typing function to one narrative:

$('.type-it').typeIt({})
.tiType('I type some text pretty fasst')
.tiDelete(2)
.tiType('t!');

It would be great to have the functions available as public methods, to manipulate a typed text later on, e.g. like this:

	$('.write-more').click(function() {
		$('.type-it').typeIt().tiDelete(1).tiType(' and I do not like to stop.');
	});

or

	$('.write-more').click(function() {
		$('.type-it').trigger('tiType', ' and I do not like to stop.');
	});

Or is this already possible and I have not got the trick?

Hi when i have the following and once its deleted the font size jumps.

here is my code

<span class="t1"><span class="text t1">Lorem ipsum</span></span> <br> <br> <span class="t2"><span class="text-1 t2">Lorem ipsum</span></span>

$('.text').typeIt({ cursor: false, speed: 400, lifeLike: true, autoStart: false, startDelete: true }) .tiSettings({speed: 300}) .tiType('I am typing slowly,') .tiSettings({speed: 100}) .tiType('but now I am typing pretty fasst') .tiSettings({speed: 300}) .tiDelete(2) .tiType('t!');

$('.text-1').typeIt({ cursor: false, speed: 400, lifeLike: true, autoStart: false, startDelete: true }) .tiSettings({speed: 100}) .tiType('I am typing slowly,') .tiSettings({speed: 100}) .tiType('but now I am typing pretty fasst') .tiSettings({speed: 300}) .tiDelete(2) .tiType('t!');

It seems as if the callback is firing not when the typing ends but right when it starts, I am using it as such:

var theStrings = [  [ 'string one', 'string two' ]  ]

function cb(){
  console.log("callback");
}

$('#target').typeIt({
      strings:theStrings[0],
      cursor:false,
      speed:8,
      breakDelay:50,
      callback: cb()
 });

I also tried the callback "inline" as:

callback: console.log("callback!")

to no avail

Strange?

It would be great if there was a way to stop (or better yet pause) the current animation.

I would like to pause/stop an animation when it is out of view and ideally resume/restart when it comes back into view. Currently, I can restart it by just resetting up TypeIt on the element again, but I don't have any way to stop the animation. And better than stop/restart would be a way to pause/resume, so that when it comes back in view it picks up where it left off.

My code totally works fine, but when I apply the cursor: false option, it doesn't seems to work. (Even the sting disappears)

 $('#typename').typeIt({
        strings: 'HelloWorld',
        speed: 100,
        autoStart: false,
        loop: false,
       //cursor: false
    });

Using version: 4.4.0

I would love the ability to remove all TypeIt tracking from an element. For example when an element is removed from view, etc.

You cannot visit macarthur.me right now because the website uses HSTS. Network errors and attacks are usually temporary, so this page will probably work later.

Asking typeIt to write a text which includes the tag <p></p> (only one level) results in the tag being doubled as : <p>text<p></p></p>

This can be reproduced with even the simplest example:

$('#target').typeIt({
      strings:'<p>this and that</p>'
});

If the cursor is visible, it goes down one extra line, which looks weird.

I have the impression that <p> is acting a bit like <br> which kind of makes sense, but I do not follow the logic about what happens and how to avoid it, and the documentation is not very explicit about this.

Thanks

Basically, I want to type " I am a _____" and cycle through words to fill in the blank afterwords, deleting just the last word and retyping it.

Here is what I currently have:

.tiType('I am a ')
.tiType("student.")
.tiPause(3000)
.tiDelete(8)
.tiType("programmer.")
.tiPause(3000)
.tiDelete(11)
.tiType("hobbyist.")
.tiPause(3000)
.tiDelete(9)

I want to keep the "I am a" part and only continuously cycle (loop) through the words that fill in the blank. Is there a way to do this? Thank you.

.

when i use a different language to type in, the special charecters are breaking up. however when the delete happens, the chars seem to be proper.

here is an example for testing " ಇನ್‌ಪುಟ್ ಪರಿಕರಗಳನ್ನು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ ಪ್ರಯತ್ನಿಸಿ "
to reproduce: paste this is the example window with "loop" - true

On Mobile device text typing speed become very slow. First three events working fine. On 4th event works normal speed for first some characters. Later it takes nearly 2 seconds for each character. We tested this on android and iPhone. Both having same issue.

To reproduce the issue, add typing events to multiple element with some distance. First scroll top to bottom. You can see first some events will work normal. But others not. Now refresh page and scroll bottom to top, most of the events will not work with normal speed.

This may not be exactly an issue, not sure.

I was getting an error: Cannot read property 'indexOf' of undefined(…) on loading the page with the simples typeIt examples.

It seems the problem was my target html tag was written as such

<div class="target">
</div>

instead of as such, which DOES work:

<div class="target"></div>

Is this expected behaviour for some reason? it kept me entertained and baffled for a while

thanks