How to create multiple nested GSAP scroll trigger that react for different axis?

Hi Im trying to figure it out how is it possible to trigger typing text effect under the same wrapper
that 1st triggered vertically and subsequently horizontally

following this instruction
https://preview.webflow.com/preview/gsap-horizontal-scroll?preview=3c379c22c75a1399b4b82b1d5fd5bc97

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/TextPlugin.min.js"></script>

<style>
/* .typing {
	max-width: auto !important;
 	width: auto !important;
}
*/
/*blinking cursor at info section*/
  .cursor {
  animation: cursorBlink 0.5s alternate infinite;
}

@keyframes cursorBlink {
  from {opacity: 0;}
  to {opacity: 100%;}
}
</style>


<script type="text/javascript">

  
// type="text/javascript"
//define the parent scroll trigger
let tlMain = gsap
  .timeline({
    scrollTrigger: {
      trigger: ".section-height",
      start: "top top",
      end: "98% bottom",
      scrub: 1 //1 sec delay
    }
  })
  .to(".track", {
    xPercent: -100,
    ease: "none"
  });
gsap
.timeline({
    scrollTrigger: {
      trigger: ".info",
      containerAnimation: tlMain,
      start: "center 30%",
      end: "top 0%",
      scrub: true
       }
  })
      .from(".typing_text_target", {
  text: "lorem ipsum...............................",});


gsap
  .timeline({
    scrollTrigger: {
      trigger: ".about",
      containerAnimation: tlMain,
      pin: ".typing2",
      start: "left left",
      end: "right left",
      horizontal: true,
      markers: true,
      scrub: true
    }
  })
.from(".typing_text_target2",  {
  text: "lorem ipsum...............................",});

   
 
 
</script>

but it doesnt type when I scroll the text is instant there
however it doesnt type when I scroll the text is instant there, the console doesn’t show any bug…
If I use .to instead of .from that text doesn’t appear at all
How can I use vertical trigger and horizontal trigger under one script?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Im not sure if this is the right demo , to implement the idea

but at least I found a way to illustrate the issue

cMPZDcE.png

How implement scroll triggered text typing

vertically and than in nested form horizontally?