shopnilSS

Animation typing with vanila javascript

May 27th, 2021 (edited)
83
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let myText = ["Webdeveloper", "React Developer"]; //my input text
  2. let count = 0; //initially  count is 0 it will trace the input text index number
  3. let currentText = ''; //here my current text will store
  4. let strIndx = 0; //it will track the slice part of string index
  5. let arrayTrack = 0; //this will tract the array ittaration so that if the array is empty auto call function will stop
  6. let trackTheElement = 1 //to execute the reverse split of string index number
  7. let loop = true //do the loop running or run only one time.if true then loop will running and if false then loop will run only one time
  8. // let sliceOfString = myText[0].split("")[0]
  9. let sliceOfString
  10. const hello =  () => {
  11.     currentText = myText[count]  //store the current text
  12.     let currentTextLength = currentText.length //store the current text length
  13.     if(currentTextLength >= trackTheElement){ //check the current text is greater than track element or not
  14.             sliceOfString =  currentText.slice(0, ++strIndx) //slice one by one string incremently
  15.             if(myText.length >= count + 1 ){  //check the main input text array length is greter and equal to the count number
  16.                 trackTheElement++
  17.             }
  18.             console.log(sliceOfString);
  19.     }else if(currentTextLength < trackTheElement){
  20.         sliceOfString =  currentText.slice(0, --strIndx) //slice one by one string decremently
  21.             if(myText.length >= count + 1 ){ //check the main input text array length is greter and equal to the count number
  22.                 if(sliceOfString.length == 0){ //if the slice string's length is zero then it will execute to continue another text and did the same animation
  23.                     count++
  24.                     strIndx = 0
  25.                     trackTheElement = 0
  26.                     arrayTrack++
  27.                     if(myText.length == count && sliceOfString.length == 0 ){ //for continue the loop start from the begging
  28.                         count = 0
  29.                     }
  30.                 }
  31.                 trackTheElement++
  32.                 // console.log(sliceOfString);
  33.             }
  34.             console.log(sliceOfString);
  35.     }
  36.  
  37.     // call the function part
  38.     if(arrayTrack <= myText.length - 1){
  39.         setTimeout(() => hello(), 350)
  40.     }else{
  41.         loop && setTimeout(() => hello(), 350)  //if the loop is true then it will looping these process
  42.     }
  43.    
  44. };
  45. hello()
  46.  
  47.  
Add Comment
Please, Sign In to add comment