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