Hi Francois, ( @meehanfp)
You can animate the innerHTML of an element. And type the letters in as you create new keyframes but …
an easier way is using a javascript library.
textAnimation.zip (26.3 KB)
Enjoy!
3 Likes
Wow! Thanks, this is awesome!
More info here! for the javascript library. If you want to change it. 
1 Like
Hey DBear…
This is very kind of you to add this, and although I have downloaded and done my best to integrate the JS file into my existing page, I am at a loss.
I have added the… “This is really all you need to get going.”
<script src="jquery.js"></script>
<script src="typed.js"></script>
To my Head HTML document, but now what?
The test text and New Text, New Text, New Text... doesn't show up on scene.
I have downloaded the .js folder, but now what? How do I get it into Hype?
Confused, yet again.
Thanks :)Hi Derek,
I’ll try to break it down for you. 
There are a few ways to achieve this.
• First you have to download a copy of typed.js from the site
(this is a direct link to download it 
https://github.com/mattboldt/typed.js/archive/master.zip )
• Then drag to your resources folder in your Hype document or click the plus symbol at the bottom of the resources window and click add file… 
(Don’t forget the file you want is “typed.js”
• You then need to do the same for jQuery or you can use the CDN link
So depending on what you did your head.HTML file should look like this
<script type="text/javascript" src="${resourcesFolderName}/jquery.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/typed.js"></script>
or
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/typed.js"></script>
Then you have to write a little javascript for what text you want to appear. If you look at my document I uploaded above then you should see what I’ve done.
Basically, on scene load run a new javascript function and add the code below then wherever you want your text to display give it a class name of “typed”. Your sentences are where it says strings: below.
$(".typed").typed({
strings: ["New Text New Text New Text New Text New Text New Text.", "New Text New Text New Text New Text New Text New Text."],
typeSpeed: 1
});
If you’re still stuck let me know and maybe send me what you want done and I’ll do you a quick document.
D
Hey thanks DBear.
I don’t know why I can’t get my head around it, but here’s what I have…
This is the Header:
This is the Javascript I put into a new function called Test()
$(function(){
$(".typed").typed({
strings: ["New Text New Text New Text New Text New Text New Text.", "New Text New Text New Text New Text New Text New Text."],
typeSpeed: 1
});
});
I added Test() to OnSceneLoad … but nada.
Gotta be missing something.
Thanks for your help.
EDIT - It appears the header text doesn’t show… but it is the second choice.
Also… I only added the file names type.js, not the entire folder??
Here is a simple Javascript that seems to work ok.
I just wrote it so it is what it is… for now. 
var charArray = "Here is some text to type out\n And this is a second line.".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);
In this project this Javascript is run on scene load.
type text.hypetemplate.zip (10.6 KB)
3 Likes
Hey Thanks Mark.
Can’t get that to work either… maybe I default to a simple F*&%ing opacity fade.
1 Like
Thanks Mark.
But it is huge.
I have lots of text I would like to animation various scenes, but am under time constraints and can’t be bothered if it’s going to take this amount of effort.
Found an equally impressive option.
Thanks much for your time and offer 
Hi Derek ,
Ok.
Maybe when you get some time we can go over what you are doing. Both methods above are really simple to add to a project so maybe there is some misunderstanding of how to run things in hype, which we can look at.
Can you elaborate on the solution you found for others who may read this post.
Cheers
@Chizz Derek,
I just noticed a typo in the code above which I just corrected. This would have stopped it working.
The line textElement.innerHTML = ttextElement.innerHTML + charItem;
Should be textElement.innerHTML = textElement.innerHTML + charItem;
The download would have worked as expected
Well, I’m not sure what else we could do. Nice to see you’ve found an option.
D
A slight update to my code.
I noticed that the CR where not working…
There is probably a better way of getting them to show up. But this works for me at the mo.
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;
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);
2 Likes
You have to add a rectangle element and give it a class name of "typed". This is where the text will appear.
D
Hello Francois,
I am sending you a link to a simple process I use. Type out the text and then use the same colour as your background in a rectangle that is on top of the text and have that rectangle move out of the way using a timeline… Download the zip file from my site, no need for extra coding Hype does it for you
good luck
Colin
Update… the link did not work, I have since uploaded a zip file
Can you zip and upload this.
Thanks
Would love to, I thought sending a link would work… not sure how to upload
just compress the project file and drag it into your post.
