Neodigm Utils | New typeOn function. Progressive text.

[neodigm]

See usage below.

Documentation: A simple Wiki recipe

[neodigm]

Lets make this signature compatible with countTo.

[neodigm]

Perhaps create a Wiki Recipe explaining how to implement with the Intersection Observer API.

[neodigm]

Thoughts:

JavaScript neodigmUtils.typeOn({"q1st":".readampm__caption", "msg":"Hi|How are you?|Well, I hope.", "mode":"RANDOM|lLOOP","uniqueDelay":148})

Declarative, can point to element(s) other than the source. For example a data attrib on a button can actuate typeOn on a different element(s), such as an H2. This functionality is not without precedence, think Carousel nav method.

data-n55-typeon-click='{"q1st": ".readampm__caption", "msg":"Hi|How are you?|Well, I hope.","mode":"RANDOM|LOOP|OFF","uniqueDelay":68}'
data-n55-typeon-hover='{"q1st": "#js-el__caption--id", "msg":"Hi|How are you?|Well, I hope.""uniqueDelay":96}'
data-n55-typeon-visible='{"q1st": "[data-attr].readampm__caption", "msg":"Type on|when scrolled|into viewport""uniqueDelay":48}'

1. The async function returns a reference to the neodigmUtils object so that it can be chained.
2. See also: typeOff
3. The data-n55-typeon attrib will have a zero based number representing the current phrase, so that it can be uniquely targeted via a CSS query.

[neodigm]

The JS implementation is available in the alpha branch.

    typeOff: async function( o ){
      let elTrg = document.querySelector( o?.q1st )
      if( elTrg ){
        let nInterv = elTrg.textContent.length
        let oSt = window.getComputedStyle( elTrg )
        let nPd = Number(oSt.paddingTop.replace("px", "")) + Number(oSt.paddingBottom.replace("px", ""))
        if( elTrg.offsetHeight ) elTrg.style.height = (elTrg.offsetHeight - nPd ) + "px"
        while( nInterv ){
          setTimeout( ()=>{ elTrg.textContent = elTrg.textContent.replace(/.$/,"") }, o.uniqueDelay * nInterv-- )
        }
      }
    },
    typeOn: async function( o ){ 
      let elTrg = document.querySelector( o?.q1st )
      if( elTrg ){
        elTrg.dataset.n55Typeon = 0
        let sMsg = o.msg.replaceAll("|", "   |   ") + "   "  //  Pause between
        let aPhrz = sMsg.split("|")
        if( ( o?.mode == "RANDOM" ) && aPhrz.length ){  //  Token CAPS
          let nRnd = elTrg.dataset.n55Typeon = neodigmUtils.f02x( aPhrz.length )
          sMsg = aPhrz[ nRnd ]  //  A single Phrase
        }
        const NTIMES = [ sMsg.length, o.uniqueDelay ];
        neodigmUtils.typeOff({"q1st": o.q1st, "uniqueDelay": ( o.uniqueDelay / elTrg.textContent.length ) - 4 })
        neodigmMetronome.unsubscribe( NTIMES[1] ).subscribe( ( mx )=>{
          let sChr = sMsg[ sMsg.length - (mx + 1) ]
          if( sChr == "|" ){
            sChr = ""
            neodigmUtils.typeOff({"q1st": o.q1st, "uniqueDelay": ( o.uniqueDelay / elTrg.textContent.length ) - 4 })
            elTrg.dataset.n55Typeon++
          }
          elTrg.textContent += sChr
          if( o?.mode == "LOOP" && mx == 0 ) neodigmUtils.typeOn( o )  //  recurse
        }, NTIMES[1], NTIMES[0] )
      }
      return neodigmUtils;
    }

[neodigm]

This task is complete in v3.1.