How to use textillate.js with Hype?

so start your journey :wink: well at least consider …

Already have :wink: Im rewriting some of the stuff now.

1 Like

I look forward to seeing it.

@h_classen is just picking up on my sentiment… There are times it can be a little frustrating when we help out. We ( at least I ) expect to see the people we are helping to show that they are doing some of the work themselves, otherwise it seems we are doing all the work for them regardless of them posting “what if it was like this…”. Which is what this was starting to feel like…

I am sure that this is not your intension and you are just trying to push this along and give everyone a useful tool.

But it really does help if you post some examples of where you are at and what you have tried rather than just suggestions. We are not going to piss all over them and we may not even post any suggestions or examples ourselves back but it does encourage us to help you here or in future…

1 Like

Just gonna chime in here. When helping we are not necessarily doing it because we want to learn that particular thing it’s normally because we understand the issue and have the knowledge to show users where they have perhaps gone wrong or a little nudge in the right direction. I must admit when I started to read this topic I got the impression it was a “how to” and the replies were showing the how to’s but it seemed a lot of “how’s” that followed which again is ok but the more it went on it seemed like.

That’s done … now how to do this next bit … ahh ok … and how to do this?

Which is what feels like we’re doing all the work. If it’s something that needs learning then the learning has to be done before coming to the forum and asking more questions as it will inevitably get confusing very quickly.

Just my 2 cents :smiley: and it’s not just the users fault. Some of the blame has to be from our side because sometimes we build a rod for our own backs but if we stopped then the forum wouldn’t be what it is today. A great place to help and learn not just from a Hype point of view but also in other aspects such as coding, design, animation, etc.


I surely will post once I’m done, promise! Of course It’ll take me sometime to finish it as I’m not a seasoned JavaScript expert like you two. The final piece should have less of everything you got going as far behaviors and will be paired up as 3 In 1 within just 1 action. I’ll try to rewrite everything so that you won’t feel like I’m ripping off…

Granted your example works, but it’s not the way Id want to use it everyday. So Mark, rest assured your example file is def safe with you and you only and maybe Hans? Seeing as he gave it a Like?

As for Hans’s ‘sentiment’, I wouldn’t call it a sentiment… it’s more of him trying say “enough already this is not request on demand forum”

Oh no, :joy: Another one with his chimes and his cents. Great, just great!

I am throwing in my :five: cents: these coding samples from seasoned code warriors of our forum is a great opportunity for us non-programmers to visualize what one can achieve with code – and then get the courage to get our feet wet and tame that JavaScript beast. @MarkHunte and @JimScott – respect and :clap:


@Ed_Sager I was expecting a chime from ya instead I got loose change? How dare you! :joy:. I don’t know who carries loose change these days… That said, I’m glad we have someone like Mark here to save the day. I’ve actually took Marks doc a step further and continued on creating additional behaviors for other in and out styles will share when on the Mac. Though, I must admit I’ve hit a brick wall at a point where in and out share the same names as a result I can’t assign it to a specific behavior to a get a specific animation going perhaps @MarkHunte can look at it and unleash his magic?

1 Like

Right @petester - I had fun playing with the provided sample

@MarkHunte :clap:
I see potential in Textillate.js as productivity tool for quickly building Text FX presets right inside Hype.
For visual designers it would be fun to work with, Textillate.js provides a visual Playground for previewing In&Out-Text animations on its homepage (, just great!
I would love to use Text FX from Textillate.js in educational quiz projects. No more painstakingly slow letter-by-letter animation of quiz questions and headlines!

1 Like

Don’t know if you know, keynote has similar animations built-in and not only applicable to text but images and can also be exported out as a html.

Yes, Keynote and other presentation software…You’re giving me one more reason to wonder why those ubiquitous FXs are still not incorporated into Hype natively, same way as scene transitions are.

As promised, heres the edited Hype doc with more behaviors. Additionally, I figured out how to force an out animation that shares the same entry like ‘swing’ for instance which has no out state name. Im going through and adding all of possible in and out behaviors ill be updating this file.

Updating as I go. (21.6 KB)


incredible solution Pete, did you discover how to integrate the time speed to the effect? I read the references but i can’t make it work. Any ideas?

It’s controlled via the textilate.js library there you can adjust the timing. Read me

1 Like

Hi Pete and people , i can make a loop whit a efect whitout begin from start whit fade in.

I’d imagine u can set an action to the beginning of the timeline and play with hype, this way it’s a loop but I wouldn’t recommend it.

1 Like

Thanks for the help and all the details about how to use textillate.js. I have been playing with the example @petester shared and I have some questions about how to work with this JS (I'm not code Expert), I hope someone can help me.

  1. If I have different Text boxes in one scene, and want to apply the animation how I indicate what text box to animate? (it's with this option? selector: '.texts', I try it changing the value for unique id I set for each text box, but don't work)

  2. animation-duration: It is possible to set the duration of the whole text box animation? I just see the option to choose the delay to start, and a delay between the characters, but not for example if have to set by character choose how long to reproduce each character animation

  3. if I make different scenes, after play the animation in one scene and jump to next scene don't play the text animation in the next animation.

I appreciate your help,


It sounds like you were on the right track, it may be good to post your work in progress. From what you've said I'd guess the issue may be something like using the #idName selector instead of a .. This code works basically for me:

 	$('#blah').textillate( inOptions );
   //-- This forces run

The document @petester made is pretty "global" for the options, so you may need to make different ones instead of using inOptions also.

Glancing at the textillate documentation, I don't see this as an option. It looks like per character is the only route, so you'll need to calculate this yourself.

I'm a little unclear here; but I assume you want an animation to only play once? If so, you may need to keep track of this state yourself via a variable.

Thanks Jonathan for your detailed reply

1 Like

Thanks Pete