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.
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.
Summary
There are many ways to skin a "insert preferred animal here".
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.
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!
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 :
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.
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);
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!
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!
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.
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.
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
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);
I like to use the typing effect.
But I try to change the text at the hype scene (hype.element) and not inside the javascript.
In the sample the text is written inside the js at the point "var charArray =…"
But I can not use the hype.element “text” to change the text with typing effect.
Hope you understand what I mean.
Kind regards
Jonas
If understand you, you do not want to use JS to do the typing.
Then you just need to use timeline properties. innerHTML.
Have a look at how the original poster of this post did it. The example project they posted does this. Ignore my input about JS later on and what the thread is originally about