How to use textillate.js with Hype?

41

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.

42

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.

43

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.
textillateforhype.hype.zip (21.6 KB)

8 Likes
44

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?

45

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

1 Like
46

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

47

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
48

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,

Thanks

49

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
   $('#blah').textillate('in');

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.

50

Thanks Jonathan for your detailed reply

1 Like
51

Thanks Pete