type writting effect

Ask the community
,
1

i am looking for a type writting effect to add in html to make a text box type out words and stay there been trying different things myself but havent been able to even come up with a simple one much appreciated the help in advance

2

Hello! Take a look at this forum post to get you started. The comments there have examples that should help you. https://www.wix.com/velo/forum/coding-with-velo/typewriter-animation-on-wix

3

See the Typewriter example .

4

i have this basic code down what im missing is how to make them into paragraphs
let interval
let timeInterval = 10
let typeStr = [ “Acquired brain injury is any structural damage to the brain, occurring after birth, and resulting in a change in neuronal activity” , < br > “Acquired brain injury can affect the physical integrity, the metabolic activity and functional ability of the brain.” ]
let typeIdx = 0
let displayStr = “”
let endingString = “|”

$w . onReady (() => {
$w ( “#text1” ). text = “”
interval = setInterval (() => {
displayStr = displayStr + typeStr[typeIdx ]
typeIdx ++

    $w ( "#text1" ). text  =  displayStr  +  endingString 

    typeIdx  ===  typeStr.length  &&  clearInterval ( interval ) 
},  timeInterval )

})

cant seem to get it to work

5

What are you trying to do? Did you see the Typewriter example ? Did you try it? So, let’s make a couple of adjustments to get paragraphs.

The example uses the text element’s .html property to preserve the display style. However, you can use the .text property of the text element and if you want paragraphs, you can do something like this (note that I’m using backticks):

let str = `paragraph one
paragraph two`;

However, if you want to use the .html property to preserve the style (as the example does), then change the text to use a special character to indicate new line (paragraph). In this case, I’ll use ^:

let typeStr = `99 bottles of beer on the wall,^99 bottles of beer,^if one of those bottles should happen to fall,^98 bottles of beer on the wall.`;

You then need to change the typing code to replace the ^ with
. Here’s what I have (changes to the example in red):

interval = setInterval(function () {
   // Get next char from string to be typed
   let nextChar = typeStr[typeIdx++];
   if(nextChar === '^') {
       nextChar = '<br>'; // new line if special character
   }
   displayStr = displayStr + nextChar;
   // insert the display string in between the original html pieces
   $w("#typewriterPage").html = strPieces[0] + displayStr + strPieces[1];
   // Stop the interval from running when we get to the last character
   if (typeIdx === typeStr.length) clearInterval(interval);
}, timeInterval);

With a little playing you should be able to work this out. Have fun.