jschr/textillate

A jquery plugin for CSS3 text animations.

textillate's Issues

Hidden content when rotationg on chrome

I've noticed that some slabs are hidden when the transformation was perfomed... I think that this is a Chrome Issue but it can be partially mitigated on testillate removing the -webkit-transform (on wordX spans) when the animation was completed.

start delay

Hello,
Is it possible to put a delay to the autostart animation : for example, my text animation autostarts after 2 seconds ?

Thank you.

Sebbweb

inEffects: [],

I am having issues getting my text to hide before the effect renders when I use the initialDelay on an in effect. I'm sure it must be my ignorance.

I'm using:

initialDelay:2000, inEffects: [] on flipInX

Thanks!

outAnimationEnd.tlt

Hello,

Im noticing that everytime I test the OutAnimationEnd of the script, it does not fire accordingly.

e.g.
$('.tlt').on('outAnimationEnd.tlt', function () {
alert("animation has ended");
});

I have 3 separate strings. The first one always fails to fire the event, but the other 2 does fire it properly.

How to tell if animation is in progress?

I want to start an animation in the onmouseover event if there is not already one occurring. However I do not see any "isAnimating()" API. How can this be accomplished with existing library, or will you consider adding that API?

Safari Animate-In not working properly, even on Textillate's homepage

Instead of Animating-In each character individually, it will take maybe one character and animate it in, and then take the next 5-6 characters and animate them all at once, and then repeat that until all the characters are completed. Animate-Out seems to work as it should though.

Issue is happening only in Safari (i'm using 6.0.5 on Mountain Lion, not sure about other versions).

When you load the Textillate homepage/examples in Safari you can see the "fadeInLeftBig" working as it should. But if you change it to any other transition it starts to do that weird grouping thing. Then if you change it back to "fadeInLeftBig" it stops working properly and does the grouping as well. (after it loops once it actually breaks also).

I will try to explain more clearly if you have any questions. Any help would be appreciated.

Thanks!

Effect for doing nothing?

Hi, is there any way to get an effect in: for doing nothing?
That is, letters simply appears and after some seconds jump to the effect out:

Replace list items after animation?

Hi, I'm wondering if there's a way to create a cycle with textillate that cycles through each list item, initiating the in-effect, initiating a fadeOut, then going to the next list time and repeating this cycle. Below is the code I usually use for a cycle, but the textillate for an in-effect seems to not work after the first cycle, presuming because there's incompatibility with textillate and fading back in an item that's been faded out with the .fadeOut method?

Here's the code I use to create a cycle:

var items = $('#list li').hide(), 
        i=0;

        (function cycle() {
            items.eq(i).fadeIn(400)
                        .delay(2000)
                        .fadeOut(700, cycle);
            i = ++i % items.length;
    })();

And here's my attempt utilizing textillate for the in-effect, and the standard .fadeOut() method for the out-effect:

var items = $('#list li'), 
    i=0;

$(function cycle() {
    items.eq(i).textillate({ in: {effect: 'fadeIn'} }).delay(2000).fadeOut(700, cycle);
    i = ++i % items.length;
    }); 

Thanks!

cant get the animation out to work

not sure if i forgot something :/

$(function () {
    $('.search-helper').textillate({
        in: {
        effect: 'bounce',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: false,
        reverse: false,
        callback: function () {}
      },
      out: {
        effect: 'bounce',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: false,
        reverse: true,
        callback: function () {}
      }
    }); 
});

Using text variables

I like textillate and would like to use it in an iOS weather theme, but my script uses variables (different & changing weather conditions) instead of text.
How can I use variables instead of text?
I also would use more then one variable, e.g. city, country/county, weather condition, GPS coordinates etc.
Textillate would be great as it would allow to "declutter" the lockscreen, as it uses one dedicated space to display multiple information in sequence.
Hope someone can help.

text height space

Hello I'm using the textillate tool, it's awesome thanks !
I'm using 'fadeInDown' and a 'fadeOutUp' effects.

Here is my problem :
I would like to control the effect's height's space : I would like my text to reach the middle of its content, and not just fade in and out into a 100px height interval.

Can anyone help me please ?

Looping the animation with random effect

Hi,
Can you please let me know how I can loop the text animation with loops and random in and out effects ?
I tried loop: true and setting shuffle:true for the in and out; but seems not working ?!

http://jsbin.com/adoxes/1/edit

Problem with background Cover

Hello,

With a background cover (on another div) where the text is, it all goes weird when you scroll down.

Here is a link : http://sebastien-crapoulet.fr/ so that you can see it in action.

Do you think you could fix this ?

By the way, love your work, great great plug-in !

Garbled handling

Perhaps I'm missing it on the demo/desc page, but is this plugin not capable of handling li tags with div's and the like nested inside them? I use animate.css, and I know, for example, it will work with images and so on, so perhaps I'm just doing something wrong.

I have an unordered list with various list items, inside of which are a div with a span and p tag. When the page first displays, it shows all the text, unformatted, in one massive paragraph. It applies the animation, and brings back -2- of that paragraph. Animation, and now it shows single lines, but, again, without any formatting applied.

Again, perhaps I'm doing something wrong. I can see in the console that the script is doing it's thing, and at the paragraph phase, it seems that multiple lines are wrapping in the word classed spans the script uses.

Admittedly, I'm using the initialization and passing parameters; I've yet to try the markup and see if makes a difference.

Any suggestions would be greatly appreciated. Thank you!

ie7 bugs

I am not asking for support for the animations, but the library itself causes a js error when loaded in compatibility mode, ie7 standards in IE10. The bulk of it seems its from using .in as an object property since it is a reserved javascript keyword. Even if i change the .in to ['in'], http://code.jquery.com/jquery-1.9.1.js seems to have an issue loading at line 2582 saying member not found. Would be great to clean up the code and address these issues to at least make it load in older browsers. Thanks.

It is not supporting right-to-left alphabets

textillate.js makes letters' order reversed while applying its method (.textillate())

Looping isn't synced

I would expect when looping is enabled, that every x seconds, the effect would take place. It seems however that the animations double up due to the loop initiating right after.

E.g this is what is happening:

(EFFECT) * * * * * (EFFECT) (EFFECT) * * * * * (EFFECT)(EFFECT)

I would expect this:

(EFFECT) * * * * * (EFFECT) * * * * * (EFFECT) * * * * * (EFFECT)

Ability to trigger animate out

Hi,

I'd love to see this plugin have the functionality to trigger 'animate out' - Is it possible for me to commission this feature? If you are interested please reply and we can discuss costs - Cheers

flickering while scrolling ios 6

I notice that scrolling while an item is animating (looped), things start to flicker on the page including images and other text surrounding it.

IOS 6 Bug, Sync issues with looping

After several loops, the sentence that is animating will not animate the letters one after another. Sometimes it tends to animate the first 3 letters together synced, then the remaining letters together synced. Maybe some issue with IOS animations?

<br> and <br /> break the parsing.

Hi,
If I make my markup as so:

<h2 class="mejor">Websites are more than just pages.</h2>
<h2 class="mejor">Let us help you bring yours to life.</h2>

With this initialization method:

$('.mejor').textillate({ in: { effect: 'rollIn' } });

The effect is as expected:

However, if I insert a break into the h2 element, like so:

<h2 class="mejor">Websites are more than just pages. <br>
Let us help you bring yours to life.</h2>

It breaks the parsing, resulting in this:

Since the underlying technology can handle these <br> elements, I thought you should know. Otherwise great tool! Thanks.

textillate with script fonts?

Does textillate not work well with script fonts?
Right now im trying to animate a script font as a large header (~42px):
http://www.fontsquirrel.com/fonts/kaushan-script

Im just using in: { effect: 'flipInY' }

Firefox is pretty cool with it. Chrome, however, cuts off the edges (that would normally appear outside the box) and does not animate very well.

I tried giving each span-wrapped letter a width, which helps but it still animates strange.
.homeWrapper h2 span span span:last-child { width: 27px; margin-left: -6px; }
Cut off during animation, then when finished it snaps to full width.

Ideas?

data-in-effect not working

jacksnap13 commented 2 minutes ago
Perhaps a related subject or perhaps I'm just ignorant... I'm unable to define custom effects in the texts class (li). It seems to just default to the default. I did see your jsbin re: the 'tlt' class but can't reproduce this in the 'texts' class.

You can see my experiment here. Waterfall sounds ahead beware!

http://paulclarkphoto.com/dukesCreek/

Thanks so much for this. I love it!

vertical text animation

Hello is it possible to make it place letters vertically instead of horizontal ?

Call function on animation complete

Maybe I missed it in the docs but I was wondering if there is currently a way to call a function when a text animation is complete?

It would be nice if the 'in' and 'out' objects supported a 'complete' property which accepted a function.

Thanks in advance for a response!

Unique classes when targeting li

I am using textillate to animate a list of words and I would like to be able to make each word a different color. The span tags created by the plugin for each word in my list all have a class of "word1." Is there a way to assign a unique class to each word, or some other way I can style them differently from each other?

displaying div attribute also

Dear Sir,
Plz help me i got an problem when i write div with attributes in li it also displaying that attribute what to do?

Letter 't' is buggy

​

stop loop

How can I stop the loop without deleting the hole function.
$('element').textillate('stop') would be nice.

Only out animation

It seems not to be possible to use only an out animation. You should provide more Informations on how textillate works. Does it loop always?

Good job so far!

Run effects only once?

Hi,
I'm using your plugin, it is really useful! Now I need to run effects only once but setting loop to false the plugin does not run the "out" commands, am I missing something?
I'm invoking the plugin like that:
$('.tlt').textillate({
initialDelay: 10,
loop: false,
minDisplayTime: 3000,
inEffects: [],
outEffects: ['hinge'],
in: {
effect: 'fadeInRightBig',
sync: true
},
out: {
effect: 'fadeOutRightBig',
sync: true
}
});

Thanks in advance.

there's no way to control the speed in which the effect takes place

while jquery's animate() function takes duration as argument, there's no way to control it in textillate

add a special string as line breaker

if (item == 9){
          inject += '<span class="'+klass+(i+1)+' breaker" aria-hidden="true">'+item+'</span>'+after;
        }else{
          inject += '<span class="'+klass+(i+1)+'" aria-hidden="true">'+item+'</span>'+after;
        }

The out-animation isn't working when loop is set to false

The out-animation works when loop is set to true only (http://jsfiddle.net/IrvinDominin/zHKLC/2/) and fails when set to false (http://jsfiddle.net/zHKLC/3/)

change text dynamically

This is one of the coolest jquery plugin, but with one flaw . why can't text be changed dynamically , i spentb 2 hrs trying to implement this plugin in angular , i wanted the text to be two way bound , but i couldn't succeed as i couldn't change text once plugin is initialized , i am missing something

pls help
thanks

textillate not working on js loaded html

I'm trying to run textillate on html that has been loaded dynamically but it refuses to run. Here is a fiddle to illustrate what I mean. http://jsfiddle.net/hGKHH/

Is it meant to run on dynamic html?

Can't restart a previously Textillated object ?

If i run .textillate on an object for the fist time, all seems fine. Nice Work!
But what's bugging me is that the second time I run this on the same object,
it hase a wrong behavior. Or is there an otehr wa to restart the animation ?

Typewriter effect?

Would be super nice this kind of typewriter effect.

Thanks for this!

Transition between new container widths when looping

class="current"

Downloaded the latest .js, but class="current" appears twice when text animates. Thoughts?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of jschr/textillate!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library jschr/textillate is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "jschr/textillate",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Manually Trigger

possible to make it manually trigger the animation ?
like onclick a button to play the animation.

Syntax error, unrecognized expression: :nth-child in firefox

Great plugin, in some situation it throws this error in firefox. For me the simple fix to this was changing line 143
var $elem = base.$texts.find(':nth-child(' + (index + 1) + ')')
to
var $elem = base.$texts.find(':nth-child(' + parseInt(index + 1) + ')')
and also line 186
var $elem = base.$texts.find(':nth-child(' + (base.currentIndex + 1) + ')')
to
var $elem = base.$texts.find(':nth-child(' + parseInt(base.currentIndex + 1) + ')')

Not really breaking anything but because sometimes the variable was not seen as a integer it would throw this error which kept piling up in the console, the animation was in no way affected by this.

The animation is only executed once

Hi, I'm having an issue : I want to bind to an element with id #btn the following function

jQuery('#btn').click(function() {
        jQuery('.tlt').textillate({ 
            inEffects: ['shake'],   
            outEffects: ['shake'], 
            loop: false,  
            autoStart: true, 
            initialDelay: 500 , 
            in: {    
                effect: 'shake',
                sync: true,    
                shuffle: false
            } ,
            out: {    
                effect: 'shake',
                sync: true,    
                shuffle: false
            } 
            });
}); 

The animation work and the text shakes the first time. Pressing the button a second time doesn't animate anything.

Any suggestion? Am I doing something wrong here?

Can't define an effect

I can't define a different effect than the default one. why?
http://jsbin.com/awoqom/2

html data api

Hello,
sorry for my english,your work is very good,congratulations!
I have a question,Is it possible using "data" attribute, (data like this)

h1 class=“title” data-in-effect="flash" data-in-duration ? data-in-loop? >My First flash Example

and to put "shuffle" attribute , "loop" attribute, "sync", duration and more etc etc
there is just data-in-effect and data-out-effect ? or there are other attributes ? can I have a list please? I prefer to use "data-" instead of jQuery to choose loop and shuffle etc..and I found nowhere a list on wiki or other
thanks a lot
Regards

css missing semicolon

style.css
line 257
Missing colon

Sorry I haven't forked it so I cant push a fix

Using with paralax scrolling

Hi how would you use with scrolling events. The animations load with the page but not the scroll. Love it though.

XSS attacks

I am sanitizing text before inserting it to the dom then running textillate on that DOM element. The problem is that textillate takes the content and then creates dom elements out of it (line 98, line 105, line 132) thus causing XSS attacks. Try it with <script>alert('test')</script>

Why not add a bower.json that textillate can support for Bower?

bower.json contents:

{
  "name": "textillate",
  "version": "0.6.1",
  "main": "jquery.textillate.js",
  "ignore": [
    "examples",
    "**/.*"
  ],
  "dependencies": {
    "jquery": ">= 1.6.2"
  }
}

Then, push a git tag into github, tag name looks like this: v0.8.x.