function typeWriterEffect(target, config) {
  const tL = gsap.timeline();
  const endFlashSpeed = 0.3;
  const character = "|";

  tL.to(
    target,
    {
      text: {
        value: config.text
      },
      duration: config.duration,
      ease: "none",
      onUpdate: function () {
        this.targets()[0].textContent += character;
      },
      onComplete: function () {
        this.targets()[0].textContent = config.text;
      }
    },
    "+=0.5"
  )
  //.to(target, endFlashSpeed, {
  //  text: config.text + character,
  //  repeat: -1,
  //  repeatDelay: endFlashSpeed,
  //  ease: "none"
  //});

  return tL;
}

function registerGSAPEffects() {
  gsap.registerEffect({
    name: "typewriter",
    effect: function (targets, config) {
      return typeWriterEffect(targets, config);
    },
    defaults: { duration: 2 }, //defaults
    extendTimeline: true
  });
}

function loadPara1() {
  var messageStr =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet lectus proin nibh nisl condimentum id venenatis a.";

  const tL = gsap.timeline();
  tL.typewriter("#para1", {
    text: messageStr,
    duration: 4
  });

  return tL;
}

function loadPara2() {
  var messageStr =
    "Integer eget aliquet nibh praesent tristique magna sit amet purus. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Malesuada bibendum arcu vitae elementum curabitur. ";

  const tL = gsap.timeline();
  tL.typewriter("#para2", { text: messageStr, duration: 4 });

  return tL;
}

registerGSAPEffects();

const masterTL = gsap.timeline();

const tL1 = loadPara1();
const tL2 = loadPara2();

masterTL.add(tL1);
masterTL.add(tL2);