jschr / textillate Goto Github PK
View Code? Open in Web Editor NEWA jquery plugin for CSS3 text animations.
Home Page: http://textillate.js.org
License: MIT License
A jquery plugin for CSS3 text animations.
Home Page: http://textillate.js.org
License: MIT License
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.
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?
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>
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
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!
style.css
line 257
Missing colon
Sorry I haven't forked it so I cant push a fix
Hello is it possible to make it place letters vertically instead of horizontal ?
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!
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?
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?
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.
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
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.
Would be super nice this kind of typewriter effect.
Thanks for this!
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!
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.
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 () {}
}
});
});
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 ?
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
textillate.js makes letters' order reversed while applying its method (.textillate())
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
.
Downloaded the latest .js, but class="current" appears twice when text animates. Thoughts?
I can't define a different effect than the default one. why?
http://jsbin.com/awoqom/2
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?
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)
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 ?!
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 ?
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!
Hi how would you use with scrolling events. The animations load with the page but not the scroll. Love it though.
How can I stop the loop without deleting the hole function.
$('element').textillate('stop') would be nice.
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!
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.
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:
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!
possible to make it manually trigger the animation ?
like onclick a button to play the animation.
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/)
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.
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?
while jquery's animate() function takes duration as argument, there's no way to control it in textillate
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!
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.
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?
I notice that scrolling while an item is animating (looped), things start to flicker on the page including images and other text surrounding it.
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!
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 !
Hello,
Is it possible to put a delay to the autostart animation : for example, my text animation autostarts after 2 seconds ?
Thank you.
Sebbweb
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.