[Scrolltigger getting error on react js]

I am trying to add scroll trigger on page in react js componentDidmount() function but its getting error when we click to other page

ERROR:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Here is my code:

  async componentDidMount() {

 

    let isMounted = true; 

 

    gsap.to('#root', 1, {

      css: { opacity: '1' }

    })

 

    

    let pageContainer = document.querySelector(".carsoul--onScroll");

    let container = document.getElementById("on--scroll-team");

    this.tl.to(pageContainer, {

      x: function x() {

        return -(container.scrollWidth - document.documentElement.clientWidth) + "px";

      },

      ease: Linear.easeInOut,

      scrollTrigger: {

        trigger: container,

        invalidateOnRefresh: true,

        pin: true,

        scrub: 1,

        start: "top top",

        //markers: true,

        end: function end() {

          return "+=" + pageContainer.offsetWidth;

        }

      }

    });

    

 

  }

componentWillUnmount (){

    this.tl.kill()

  }

[Can we achieve like this text animation effect with GSAP ?]

15 hours ago, Cassie said:

Thanks for putting that together. 

It looks like you have the right idea! Mask the sections, position them on top of each other and then animate their x/y values
 

 

You were targeting some elements that didn't exist and using an older version of GSAP syntax, but aside from that there's nothing more technically  that we can help you with here. As someone who's done glitchy animations before, it's fiddly work! 

Aesthetically it doesn't look right yet, but you're on the right track. What's left to do is to tweak the values, adjust the size of the masks and adjust the easing/timing of the animation until it looks right, you're nearly there!

 

 

Okay thanks @Cassie For your good information. 

[Can we achieve like this text animation effect with GSAP ?]

5 hours ago, Cassie said:

We can't help you debug by looking at screenshots - could you put together a minimal demo?

Also, I wasn't suggesting copying the markup word for word - I was just pointing out that they're using masks. 

@Cassie Sorry for that i have set demo here in codepen just look in to this 

See the Pen RwVMdpZ by JDabhi (@JDabhi) on CodePen

Please need your point of view on this.

[Can we achieve like this text animation effect with GSAP ?]

16 hours ago, Cassie said:

If you take a look in the code of the site you linked to - they are animating a lot of masks.

@Cassie Thanks for your replay I have set like this mask structure but in GSAP timeline its not getting same effect as per reference site
I have set like this : https://prnt.sc/1hgcz80
GSAP timeline like this: https://prnt.sc/1hgdaef
 

[Can we achieve like this text animation effect with GSAP ?]

I have found this site as reference for text animation but I cant get idea how can we do this Here is reference site link https://fazetaproducciones.com/es

I am new with animation please help me for this same effect animation https://prnt.sc/1gyicuy
Any help would be most most appreciated
Thanks.