GSAP scrollsmoother issue in react

[NaimeshRao]

Hi There,

 

I am using ShockinglyGreen GSAP Library for my React Project. 
Currently, I am facing issue with GSAP scrollsmoother (plugin for smooth scroll), When change the page using router. It doesn't work properly.

But the same time if I hard reload the page, It will work as aspected.

Also tried the react method to use the function inside useeffect to unmount. But still that not working.

 

Any solution for this?

 

Thanks in advance.

See the Pen by (@) on CodePen

[GreenSock]

It looks like you didn't provide a minimal demo so it's tough to diagnose but I assume you just need to call ScrollTrigger.refresh() after your reroute is finished loading everything. That tells ScrollTrigger (and ScrollSmoother) to recalculate the start/end positions. 

 

Also, if you're rerouting and there's new content, you should make sure you kill() any of the ScrollTriggers on the OLD page. You can kill them all with

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

If you're still having trouble, please provide a minimal demo so we can see the issue in context. DO NOT include your whole project - just the simplest possible reproduction of the issue with a few colored <div> elements, for example. 

[Suryakant Gupta]

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

[GreenSock]

Hi @Suryakant Gupta. Welcome to the forums. 

 

It's virtually impossible to troubleshoot by only seeing a few excerpts of the code, but I noticed you're using .from() tweens and I know that React 18 has some very strange (in my opinion) behavior in "strict" mode where it calls code TWICE instead of once which of course would logically mess with .from() tweens because they use the CURRENT value as the end and immediately render the new value you pass in. Thus when the second call occurs, it's already in that "from" state and the CURRENT value is no longer what you thought it was, and it ends up animating between two identical values (looks broken). Again, this is a React/logic issue, not a GSAP bug. 

 

Are you only seeing problems with .from() tweens? 

 

If you still need help, please provide a minimal demo with only a few colored <div> elements to show what's going on. Please do NOT include your whole project.