How to use textillate.js with Hype?

1

Would love to know how to load and use Textillate.js libary inside of Hype.

http://textillate.js.org

1 Like
2

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.

3

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?

doesn’t seem to work.
See Hype doc.
textillate.hype.zip (10.8 KB)

4

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
5

That did it Mark, Thank you! How would you actually set in a out effect based on a keyframe in the timeline?

6

Just call another Javascript.

7

How? textillate.hype.zip (16.4 KB)

8

The same type of code but called from a Timeline action!!!.

9

Hmm I’m having trouble visualizing. How do you mean?

10

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

11

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?

37 PM
Screen Shot 2018-01-30 at 4.40.37 PM.png1782×616 21.4 KB
textillate.hype.zip (16.4 KB)

12

It looks like you have not tried what I said ?

13

It didn’t work for me.

14

Post the one that did not work…

15

Here you go.

textillate.hype.zip (16.6 KB)

16

I do not understand. Whats not working…?

17

AHH The OUT is not working?

18

Works here…!.

1 Like
19

Oh yeah it does now. Muhaha :slight_smile:

20

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