Would love to know how to load and use Textillate.js libary inside of Hype.
1 Like
Here’s the docs: https://github.com/jschr/textillate
It looks like you would add jQuery to the head of your document,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
… create an ‘on scene load’ function to load:
$(function () {
$('.tlt').textillate();
})
Then create a rectangle with this inside:
<h1 class="tlt" data-in-effect="rollIn">Title</h1>
on that scene.
Cool I’ll try that. I think you are forgetting other library’s like if so, do I put them in the head of the doc?
- animate.css, by Daniel Eden
- lettering.js, by Dave Rupert
doesn’t seem to work.
See Hype doc.
textillate.hype.zip (10.8 KB)
I could not find the cdn for lettering.js so just used the one on the textillate site.
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<script src="http://textillate.js.org/assets/jquery.lettering.js"></script>
1 Like
That did it Mark, Thank you! How would you actually set in a out effect based on a keyframe in the timeline?
Just call another Javascript.
The same type of code but called from a Timeline action!!!.
Hmm I’m having trouble visualizing. How do you mean?
Ok.
The docs are crap…
I worked this out.
You can put this in the first script.
$('.tlt').textillate({
in: { effect: 'rollIn'},
out: { effect: 'flipOutX'}
});
When run only the in will run. But the out is now setup to the effect.
To make the out work you later call ,
$('.tlt').textillate('out');
Note.
There are callbacks that can also be used if you want to run when the in is completed as well as events that you can add listeners for.
For more effect options it looks like you need to look at the animate.css docs
It works like this for the bounce up and having the script it how they have it. the Inner HTML is not keyframable? I want to change it at 5 sec Mark to out?
textillate.hype.zip (16.4 KB)
It looks like you have not tried what I said ?
It didn’t work for me.
Post the one that did not work…
I do not understand. Whats not working…?
AHH The OUT is not working?
Works here…!.
1 Like
Oh yeah it does now. Muhaha 
Also you do not need the data-in-effect="bounceInUp code in the innerHTML if you are doing effects it via the script
1 Like