ScrollSmoother React not scrolling through gsap + ScrollTrigger Animations

[eo33]

I have a bunch of ScrollTrigger animations that work, but when I wrap my content in a smooth-wrapper for ScrollSmoother, the ScrollTrigger animations wont work and I just scroll to the end of the page without the animations working.
This is how I am using ScrollSmoother, and this is the error I get.
My gsap + ScrollTrigger animations are inside my Home component in a useEffect hook.

[eo33]

[Cassie]

Hey there!

 

That error usually means that the DOM element can't be found. Maybe try useLayoutEffect instead?

If that's not helpful - do you think you could pop together a minimal demo for us?

 

https://codesandbox.io/s/gsap-bonus-plugins-react-starter-je6ln

[OSUblake]

I don't know if this is related, but you should always include bother wrappers inside React, so GSAP doesn't have to insert the wrapper element. React doesn't like it when the DOM is manipulated like that.

 

<div id="smooth-wrapper">
  <div id="smooth-content">My Content</div>
</div>

 

[eo33]

Managed to recreate the same error in this Sandbox:

Its rushed and not stylised 😋

https://codesandbox.io/s/lucid-cherry-oiuo11?file=/src/Home.js

[GreenSock]

I'm not seeing any GSAP-related error in that project. What am I missing? 

[eo33]

[OSUblake]

Did you forget to save your sandbox? The link you provided is just showing the demo that Cassie linked to.

[OSUblake]

Here's a demo with React, maybe fork this one.

 

https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-0h67eh

 

Edit. That's using next.js, but maybe it will give you an idea of how to set it up.

[eo33]

I thought I already forked Cassies and saved it. 
try this: https://codesandbox.io/s/mutable-frog-u6mhxo

 

[OSUblake]

Yeah, that's different than the link you posted above. The Home component doesn't have any code in it, and also this. Note that it should be IDs and not className.

 

23 minutes ago, OSUblake said:

I don't know if this is related, but you should always include bother wrappers inside React, so GSAP doesn't have to insert the wrapper element. React doesn't like it when the DOM is manipulated like that.

 

<div id="smooth-wrapper">
  <div id="smooth-content">My Content</div>
</div>

 

 

 

https://codesandbox.io/s/mystifying-dijkstra-ojif3k?file=/src/App.js

 

[eo33]

Damn I thought it was autosaving.

this is it
https://codesandbox.io/s/optimistic-einstein-4svhd2?file=/src/Home.js

[Cassie]

I changed the wrappers as per Blake's instructions and also used useLayoutEffect and it works now.

https://codesandbox.io/s/mystifying-ellis-fx5wv0?file=/src/Home.js

[OSUblake]

I think I've isolated the problem to the fromTo animation here. This probably needs some further investigation.

 

https://codesandbox.io/s/infallible-shtern-1vknln?file=/src/Home.js

 

 

[eo33]

Cassie I tried this in my local project and the error persists.
However, when I removed the fromTo() animation most of it started working, but it did break a few other things.
1. My navbar doesnt seem to want to be sticky anymore even though its position: fixed
2. Some of my other animations broke too. 

I am going to try to patch it up and see why they are breaking, but the errors are gone at least

 

[GreenSock]

This only applies to ScrollTriggered animations where you're NOT using fixed-position pinning AND you're animating the "y" of the trigger (which is generally a bad idea - it's far better to use a container for the trigger and then animate the child). We'll resolve the error thrown in the next release, though. 

[eo33]

Update: it broke a lot of animations and wasn't as easy as wrap it and go.
So I've decided to remove it all together and go back to being without SmoothScroller.

Hopefully a few versions down the line these problems will be patched

 

[GreenSock]

6 hours ago, eo33 said:

Update: it broke a lot of animations and wasn't as easy as wrap it and go.

I'm super curious what you mean by this. Is there any way you could provide a minimal demo that shows things breaking? The only thing I can think of that could possibly "break" (not really, it's just a CSS thing) is anything that you've got position: fixed on that you've put INSIDE the content element. That's only because that's how browsers work - if you have a transform applied to a container element, the children with position: fixed will now be relative to that container instead of the viewport. I can't imagine how it'd have any effect whatsoever on other animations. That's why I'm so curious to see what you mean. 

 

We certainly want to patch any problems. It's tough to patch what we can't see, though, so it'd be very helpful to the whole community if you could provide that minimal demo that clearly shows things breaking simply by adding ScrollSmoother. 

[Bornfight]

Hello guys. Had the same problem (while using ScrollSmoother and ScrollTrigger combined in the Next.js project animations were instant, as if there was no duration/transition applied at all). 

 

How I approached this and kinda solved this is that I have set the immediateRender  to false on all of my animations — the GSAP docs say that this property is applied in fromTo method by default, and also on everything that has ScrollTrigger applied.

 

Additional thing I had to do to avoid flashes when animated elements enter the viewport (trigger/start in my case), I had to set initial state in the CSS of animated elements (e.g. opacity to 0).

 

Hope this helps you guys @GreenSock to solve this specific issue and also all of you guys to make a temporary workaround until its solved.

[Cassie]

Hey there.

This thread is a little confusing to me. there are multiple things being discussed and it's not clear what the issue is.

But from what you're saying - it sounds like it could be the react strict-mode bug to me?
 

 

[GreenSock]

Yeah, @Bornfight, I'm very curious to see a minimal demo. I suspect Cassie is right about this being that React issue. Once we see a clear, minimal demo, I'm sure we'll be able to offer some advice. 

[Direction Forward]

Hi all, just had this happen on a web project that does not use React. When applying ScrollSmoother and wrapping all the relative elements in that, it breaks ScrollTrigger within those elements. The ScrollTrigger animations appear to still be working but they render instantly, ie visually they're at the end on enter/start/trigger.

 

I was able to make a temp fix by using @Bornfight's comments above re immediateRender

 

I don't have time to create a minimal demo today but will circle back to this. I wanted to point out that it isn't solely React.

 

EDIT: it seems to be related to fromTo (both inside and outside of timelines).

[GreenSock]

Thanks @Direction Forward. It'd be super duper amazingly helpful to see a minimal demo. If there's a bug somewhere, we want to squash that but it's incredibly difficult when we have zero context and no way to reproduce it. We're close to pushing a new release out, so I'd like to see this as soon as possible. 👍