How to use textillate.js with Hype?


(Pete) #1

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

http://textillate.js.org


#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.


(Pete) #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)


(Mark Hunte) #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>

(Pete) #5

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


(Mark Hunte) #6

Just call another Javascript.


(Pete) #7

How? textillate.hype.zip (16.4 KB)


(Mark Hunte) #8

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


(Pete) #9

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


(Mark Hunte) #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


(Pete) #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?

textillate.hype.zip (16.4 KB)


(Mark Hunte) #12

It looks like you have not tried what I said ?


(Pete) #13

It didn’t work for me.


(Mark Hunte) #14

Post the one that did not work…


(Pete) #15

Here you go.

textillate.hype.zip (16.6 KB)


(Mark Hunte) #16

I do not understand. Whats not working…?


(Pete) #17

AHH The OUT is not working?


(Mark Hunte) #18

Works here…!.


(Pete) #19

Oh yeah it does now. Muhaha :slight_smile:


(Mark Hunte) #20

Also you do not need the data-in-effect="bounceInUp code in the innerHTML if you are doing effects it via the script