Yep, got rid of that too.
Thank you Mark your are the best! You know ill create comment out tags and have all the triggers in and out so I can easily choose which one work best.
1 Like
How about if I want to change its style like sequence, reverse, shuffle? I figured it out
out: { effect: ‘rotateOutUpRight’, shuffle: true}
Oh and heres the file that has all triggers commented out so you can easily go in and pick which one you want.
This also brings me to another question, what If i want to have more than one style in the timeline?
textillate.hype.zip (16.2 KB)
The code for this Library is all over the place. feels like I had to invent (trail and error) how.
I have used custom behavours as a way to name and manage effects.
Please have a look.
textillate mhv2.hype.zip (27.4 KB)
2 Likes
Its Clever Mark. I like how you have the name of the behaviors trigger the different
styles I can’t totally get use doing this. What would be your idea on combining behaviors with like say shuffle? Should I just create another function (shuffle, sequence, sync, reverse) below the name of the each behavior?
Ok. This is probably my last on this…
I have used the custom behaviours like options.
The name of the custom behaviours will be a key value pair. i.e reverse:true
All the option custom behaviours call the same function InOptions
if (typeof inOptions == 'undefined') {inOptions = {}}
if (typeof inOptions.in == 'undefined') {inOptions.in = {}}
if (event.customBehaviorName == 'resetInOptons'){ inOptions = {} }
console.log(inOptions.in);
var key = event.customBehaviorName.split(':')[0]
var value = event.customBehaviorName.split(':')[1]
if (value == "true"){value = true}
if (value == "false"){value = false}
inOptions.in[key]= value
So now on the Timeline action you simply call multiple option custom behaviours.
Note the special option custom behaviour resetInOptons
Run that if you want to wipe the current inOptions and start afresh.
These must be called before the Effect custom behaviours. i.e the Effect custom behaviour is the last to be called. The Hype textillate function which is then called now looks like this
inOptions.in['effect'] = event.customBehaviorName
$('.tlt').textillate( inOptions );
//-- This forces run
$('.tlt').textillate('in');
This seems to work and once you set up the custom behaviour, gives us an Option select UI in the Actions.
I have only done the In Options, if you want out Options then this will show you how to do it also.
textillate mhv3.hype.zip (28.1 KB)
2 Likes
Impressive, Great Work! I applaud you.
I have toyed with this, while it’s great and respect to you to for doing this. One thing came to mind and tell if it makes sense or not.
Would it be cool if everything you did would be in one script? So functions could be nested? So I could call out the same script over and over for it’s behavior choose the one I’m interested in? For example, If it’s a Rollin.In.Shuffle RollOut.Out.Sequence right now it’s scrattered and bit bloated maybe for a good reason I don’t know?
I am sure it is possible to get things in one script.
Hmm… bloated is not a word I would have chosen to describe it…
The reason I did it like it is, is so you could call it from the Timeline as you requested. You wanted options, this seems actually a simple way of leveraging custom behaviours to do that for us and making them interchangeable.
The other option is to make a load of scripts that get called… To me that is bloated.
The example is just a start and I would expect anyone using it to take it a run with it. There are challenges and clearly more to be refined. Like working out how to combine the out options and also a way of running on more than one element.
Some of this I have already worked out in my own version after posting the above but I cannot do it all for you otherwise I would be here all day… 
2 Likes
although it's always interesting to read requests as they show up new and interesting things ... a questioner should always be aware that this is a forum and not a codefactory ... for free ... 
2 Likes
Easy there Hans, 
If you think this place is turning into a 'free code factory'? Hmm, well, it is a forum. I feel like we all learn from each other to be better ourselves even if the person who is helping someone with a particular problem wether its Javascript or Hype.... If someone other than me was looking into using textillate.js with Hype and get it to work as easy and efficiently as possible well it would be a plus for everyone not just myself. Additionally, while I love and thankful for what Mark did, I was only trying to maybe enlighten Marks brilliant re-interpretation of how crappy or complicated the textillate docs were which in turn made him interested in trying to solve this not only for me but for himself for his own projects. The other thing to note, I may not be the brightest when it comes to Javascript but Im learning and I would be happy to extend my knowledge to someone just as Mark, you or anyone for that matter.
2 Likes
Im sorry if this seemed like a personal must have request on my behalf. This would still be in the timeline and based one action and three behaviors acting as one vs having a slew of them scattered across (see below). If it isn't something you are up for you don't have to do it and its totally cool of you to even do what you did and share with all of us. It really comes down to if you want to do it for yourself and share it if you ever wanted to whenever The point that I'm trying to make is you don't have to do any of this if its for me because g-d forbid Hans finds out. 
so start your journey well at least consider ...
Already have 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 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.
2 Likes
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, 
Another one with his chimes and his cents. Great, just great!
I am throwing in my 
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 
3 Likes
@Ed_Sager I was expecting a chime from ya instead I got loose change? How dare you! . 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 
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 (textillate.js.org), 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