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

Design help Custom code
1

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

t8tzI95
t8tzI952278×1138 125 KB

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)

2

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?