[Combine multiple fromTo() with ScrollTrigger]

@GreenSock thanks for your help here and suggestions on cleaning things up! Its nice to have some confirmation I was at least correct in concept.

[Combine multiple fromTo() with ScrollTrigger]

I have a fromTo() that I want to execute on load, and then another fromTo() that I want to execute using ScrollTrigger. My pen has the intended functionality, but looking at my code, it seems like there must be a more elegant way to combine these into a timeline. I looked at batch, and I'm not sure that's the right approach for this effect, but I am pretty to new to gsap in general.

 

Any guidance would be greatly appreciated.

See the Pen ZEejejq by rnrh (@rnrh) on CodePen

[ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs]

@Rodrigo, @elegantseagulls, @Cassie thanks for your continued help and patience with this. I think I will reach out to the smooth scroll library maintainer and see if they have any recommendations.

 

I don't disagree with you on the smooth scroll stuff, fwiw. Unfortunately, I don't have a say over it for this project. If I find a good solution I'll come back and post it here for posterity.

 

Thanks again for your help.

[ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs]

@Rodrigo thanks for your continued help.

 

This CodeSandbox has everything working with refs, but I'm still stuck with the hot reload issue. I can only seem to get the effect applied after updating one of the .to() values and saving. 

[ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs]

@elegantseagulls @Rodrigo would either of you be able to see if you can get an approach working off of this CodeSandbox. I'm spinning my wheels a bit. I also have an issue now where the bodyScrollBar instance isn't in scope because of using the multiple useEffects(). This is probably something I need to be dealing with in the useEffect() cleanup?

 

Thanks to you both for your help so far.

[ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs]

Hey @elegantseagulls

 

Unfortunately, I'm having the same issue if I wrap the smooth scrollbar and scrolltrigger setup inside a useCallback - I can only trigger on hot reload. I'm new to hooks and react so I apologize if I'm missing something really obvious here.

 

Here is a CodeSandbox of where I'm currently at.

[ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs]

Sorry - I'm not sure I understand what you mean. Where I'm defining all my smooth scrolling and scroll trigger stuff in index.js needs to be in a useCallback hook instead of a useEffect hook?

[ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs]

@elegantseagulls thank you for taking a look!

 

Would you be able to look at this CodeSandbox and see if I've implemented this as you suggested? I'm having the same issue where I can only get the effect on hot reload.

[ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs]

I am having an issue I have seen described in other contexts but haven't found a solution for. My project is using the Next.js framework for react, Smooth Scrollbar, and ScrollTrigger. I have a .to() with a scrollTrigger object inside that is in a <Navigation /> component. The text at the top of the page is just supposed to pin itself and scroll with the window, but it only works in some cases. I think I'm not fully understanding some lifecycle thing here. All these methods of reproducing my errors are also commented at the top of the index.js file in the sandbox

 

1. With Smooth Scrollbar enabled, the scrollTrigger object stored in the <Navigation /> component, and the <Navigation /> component imported and nested in the main functional component, the effect does not work after refreshing the page. If you go into the scrollTrigger object in the <Navigation /> component and update one of the values (change the 'end' value to a different number) this will trigger a hot reload without refreshing the browser. If you scroll back to the top and scroll down, you will see the effect is now working.
2. If you comment out the entire useEffect() hook in the main index.js component this will disable Smooth Scrollbar. If you save the file and refresh you will see the effect working as intended, without having to trigger a hot reload, but now there is no Smooth Scrollbar.
3. If you reset the sandbox to the original state, uncomment the HTML in the main index.js components return, comment out the <Navigation /> component right above it, save and then refresh, you will see that the effect works on load, with Smooth Scrollbar, without having to trigger a hot reload, but now I've lost the ability to nest components.

 

CodeSandbox link

Direct link to results in browser (A little easier for refreshing)

 

Any help would be greatly appreciated. I'm out of ideas at this point.