JentiDabhi

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() }

Okay thanks @Cassie For your good information.

@Cassie Sorry for that i have set demo here in codepen just look in to this https://codepen.io/JDabhi/pen/RwVMdpZ Please need your point of view on this.

@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

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.