Typewriter effect in Hype


(Colin) #21

type writter effect.zip (24.3 KB)


(Francois Meehan) #22

Hi Mark,

The new script works better but is there a way to speed up the typing?

Originally you put a statement “typeSpeed: 1”, I don’t know where to put it in the new script.

Thanks a million!


(Colin) #23

Thanks Mark, did not know it was that easy, cheers


(Mark Hunte) #24

If you are talking about my code,

Then you can do this with the end of setInterval() functon.

As shown in this snippet.

 var thisFire =   setInterval(function(){
    	 
    	 if (i == charArray.length){
    	 clearInterval( thisFire);
    	  return;
    	 }
         var charItem = charArray[i];
         
         if (charItem == "@"){
    
         charItem = "\<br\>";
    
         }
    
    	 textElement.innerHTML =  textElement.innerHTML + charItem;
    
      		i++;
    
    	 }, 200);

The timer is measured in milliseconds.

So 1000 = 1second

I initially set it 200 which is 200th of a second.

But I also found it looks better a about 165

Change the 200 to what ever speed works for you.


(Francois Meehan) #25

Ahhhh! You the Man!

I guess a little Javascript training on Lynda is in order for me.

Thanks again!


#26

@meehanfp,

Originally, I posted the document that used the typed.js script. This is where the

bit came from. Mark posted a separate script that essentially does the same job but doesn’t have the other effects that the first script has but as you only need the typewriter style on one text then that doesn’t matter.

@colinredwilliams,

What happens if you have other elements next to the text?

It’s a simple approach and worth using. One thing I would be aware of is my question above and instead of moving the box I would perhaps animate the width so that nothing else would be effected. :wink:

Summary

There are many ways to skin a “insert preferred animal here”.

D


(Colin) #27

I have to agree D, there are many ways to skin… I think if you were creating a complete web page using Hype then my process may present a problem, however if I was just creating a section of a page using Hype and inserting that Hype doc. into an HTML page then this would work. :smile:


(Mykola) #28

Hi Mark,

I have s problem with this code. When I refresh the page too fast or go to another and come fast back, it types not from the beginning and sometimes not the text which I wrote, but different letters without any sense. Thank you!


(Mark Hunte) #29

Hi,

Good catch.

Basically a new time is firing overtime the scene loads thus producing multiple texts.

Change the main code to :

	var charS = "Here is some text to type out @ And this is a second line. @@@ this is a third line with 3 returns above"
	
	var charArray = charS.split('');
	
	var textElement = hypeDocument.getElementById('text');
	var counter;
	var i=0;

 window.thisFire =   setInterval(function(){
	 
	 if (i == charArray.length){
	 clearInterval( window.thisFire);
	  return;
	 }
     var charItem = charArray[i];
     
     if (charItem == "@"){

     charItem = "\<br\>";

     }

	 textElement.innerHTML =  textElement.innerHTML + charItem;

  		i++;

	 }, 200);

So all we are doing there is making the variable that holds the timer into a global one.

window.thisFire

Than ad a new javascript function to the Scene unload Actions and add :

clearInterval( window.thisFire);

This will cancel the timer.


Blinking cursor effect
(Mark Hunte) #30

I have added a version here with a banking cursor


#31

I’m not quite sure why neither of these options seem to work with me. I’ve tried typed.js, have examined their Github, tried different functions they have listed, have to set to work on load, and it still doesn’t work.

I have also tried Matt’s option and attempted it with and without the blinking cursor and it also doesn’t start. Is there something I’m missing? Is there a way to tie to to specific animations or text that I may have missed? I believe I have all the steps right, it’s just not starting properly or at all. I appreciate any help! I’ve been going around on this for hours.


#32

Can you share what you have? Did you start with one of the downloadable examples like this one?


#33

I’ve downloaded all the examples actually. I was trying typed.js for awhile but the last thing I tried was the example you linked.

function type (hypeDovument, element, event) {
 var charS = "Here is some text to type out @ And this is a second line. @@@ this is a third line with 3 returns above"
	
	var charArray = charS.split('');
	
	var textElement = hypeDocument.getElementById('text');
	var counter;
	var i=0;

 window.thisFire =   setInterval(function(){
	 
	 if (i == charArray.length){
	 clearInterval( window.thisFire);
	  return;
	 }
     var charItem = charArray[i];
     
     if (charItem == "@"){

     charItem = "\<br\>";

     }

	 textElement.innerHTML =  textElement.innerHTML + charItem;

  		i++;

	 }, 200);

Then my head has:

<head>
<meta name>="viewpoint" content="user-scalable=yes, width=600" />
<script type="text/javascript" src="${resourcesFolderName}/typed.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/jquery.js></script>

So after this I have the type function set to run on load. I have my text set with a class of ‘text’ and I have in my timeline action on a keyframe to ‘Run Javascript’ and have it set to the type function. I apologize as I am pretty new to Hype I may have missed something very simple I need to be doing. Thanks!


#34

Can you share your .hype file as a zip so we can take a look?


#35

Here is my .hype file. I’m trying to get the first heading to type out first then move on to the next paragraphs as they go. This is an effect I’ll want to duplicate often so I was really trying to figure it out. Thanks!

TypeWriting.hype.zip (861.5 KB)


#36

This is a quick hack of your example. Implementing typed.js and adding a few options to show you how you can snowball the effects as if it’s typing out multiple texts. And also a call to another animation using the Hype API. Any questions let me know. The function is loading on the Main Timeline just before your animation finishes.

TypeWriting-vDBear.hype.zip (859.8 KB)


#37

I took a look at your example and it does make sense to me. It seems with this method I’ll do doing a custom function per each text area I want to have type. My only issue is that I still don’t have any animation displaying? Perhaps there is an error with my Hype? I see the two separate timelines but I do not see any typing animation on either the box-animation timeline or the main timeline.


#38

The typing animation will happen when you preview your project in a browser. You won’t see anything within Hype as the typing animation is controlled by Javascript


#39

I see! Wow, how could I overlook at. Thank you for the help. I really appreciate it. :smile:


(Jonas Wilhelm) #40

I look for a solution to insert the text form a normal hype text field.
So that I do not have to type the text inside the javascript.

I was only able to add aditional text but not to show only the text field text animated and nothing else.
May there is somebody how can help me to adjust the code:

var charArray = "this should show the text form the hype text elment.".split('');
var textElement = hypeDocument.getElementById('text');
var counter;
var i=0;

var thisFire =   setInterval(function(){
 
 		if (i == charArray.length){
 			clearInterval( thisFire);
  			return;
 			}
 		var charItem = charArray[i];

 		textElement.innerHTML =  textElement.innerHTML + charItem;

		i++;

}, 200);