[GSAP scrollsmoother issue in react]

I am also facing the same issue with ScrollSmoother from ShockinglyGreen GSAP Library 

 

 

ScrollSmoother.create({

wrapper: ".ScrollContainer",

content: ".MainBody",

smooth: 2.5,

effects: true,

});

 

I am using React so on route change on Unmount I have tried calling

Quote

ScrollTrigger.getAll().forEach(t => t.kill());

but on next page at some point page gets stuck and on resize event it is working as expected and this animated code is not getting rendered

 

Animation code 

Quote

let GSAP_LetsTalk = gsap.timeline({ paused: true, overwrite: true });

GSAP_LetsTalk.from(".LetsTalk .ContactForm", RightLeftSlide)

.from(".ContactForm .BottomTop", BottomTopOpt, "-= 0.1")

.from(".LetsTalk .form", LeftRightSlide);

 

ScrollTrigger.create({
        trigger: ".LetsTalk",
        start: "top 70%",
        end: "bottom 30%",
        toggleClass: "active",
        onEnter: () => {
            GSAP_LetsTalk.play();
        },
        onLeave: () => {
            GSAP_LetsTalk.reverse();
        },
    });

 

let GSAP_MainFooter = gsap.timeline({

overwrite: true,

scrollTrigger: {

trigger: ".MainFooter",

start: "top 100%",

toggleActions: "restart none none none",

// markers: true

},

});

GSAP_MainFooter.from(

".MainFooter .copyRight, .MainFooter .FooterNav, .MainFooter .PolicyNav",

BottomTopOpt

);

Thanks in Advance