Setting up scrollerProxy in gsap+locomotive4+next project

[Nadya_]

Hi!

In my previous projects I used GSAP + Locomotive Scroll 4 + Javascript, and everything worked well.
 

My latest project on Next.js. I also use GSAP + Locomotive 4 in it. I created a scrollerProxy and connected it. But it seems to me that in Section2 the ScrollTrigger behaves strangely. Why do the markers stay in place? They update their position only on window resize (when I launch the project locally from VSCode, not from stackblitz).
 

Here is the demo project: https://stackblitz.com/edit/stackblitz-starters-d1ezwn?file=components%2FScrollTriggerProxy%2Findex.tsx
 

I don't understand what the problem is as I'm new to Next.js. Does anyone already have experience using GSAP + Locomotive 4 + Next? Please help))
 

[GSAP Helper]

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[Nadya_]

Thanks for your answer.
I prepared the required example:
https://stackblitz.com/edit/react-mbhx8z?file=src%2FApp.js

Unfortunately the same result - animation works, but markers don't move.

[Cassie]

Maybe someone will be able to spot the issue, but I'm afraid that we can't really guarantee that the markers (which are a convenience) are going to work while using a third party solution for smooth scrolling.

 

They work with ScrollSmoother, which is our smooth scrolling solution. Sorry I can't help more.

[akapowl]

It's because you are using locomotive-scroll's data-scroll-section attribute, which, due to the way it handles things on the page, is bound to just not work correctly with ScrollTrigger.
 

<div className="loco-content" data-scroll-section>

Getting rid off that made the markers behave right as they should for me.

When working with ScrollTrigger in combination with locomotive-scroll you should at all cost avoid using that data-attribute of locomotive-scroll, as especially in combination with pinning things will just not work as you might intend - I guess markers fall into a similar vein.

https://gsap.com/community/search/?q=data-scroll-section&quick=1
 

[Nadya_]

35 minutes ago, Cassie said:

Maybe someone will be able to spot the issue, but I'm afraid that we can't really guarantee that the markers (which are a convenience) are going to work while using a third party solution for smooth scrolling.

 

They work with ScrollSmoother, which is our smooth scrolling solution. Sorry I can't help more.

Hi, Cassie) I chose Locomotive because I needed a customizable scrollbar.

[Nadya_]

22 minutes ago, akapowl said:

It's because you are using locomotive-scroll's data-scroll-section attribute, which, due to the way it handles things on the page, is bound to just not work correctly with ScrollTrigger.
 

Thank you, @akapowl That really helped! 😆

[mvaneijgen]

18 minutes ago, Nadya_ said:

Hi, Cassie) I chose Locomotive because I needed a customizable scrollbar.

You don't need a plugin for that as far as I'm aware https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling