using scrollsmoother effects + nextjs outside of layout file

[eliphino]

Hi there, 

 

Apologies that this is a nextjs question but thought someone must have come across this scenario already. 

My question is, do I need to store the 'smoother' instance in some global context in order to use smoother.effects outside of the layout file where Scrollsmoother is instantiated? 

 

I've attached a simple example, where Scrollsmoother instantiated in layout.tsx file but I'd like to use it's effects in a page.tsx file. 

It obviously can't use 'smoother' variable in page.tsx as it only exists in layout.tsx. 

 

https://stackblitz.com/edit/stackblitz-starters-ajea61?file=app%2Fpage.tsx

Thank you!

Edited November 6, 2023 by eliphino
more information

[eliphino]

I decided to move scrollSmoother from my layout to the individual page components. Not sure if this is the best approach but it works for me so far...I think.

[Rodrigo]

Hi,

 

Indeed using a React Context instance would be the best way and wrap the Layout children in that React Context in order to access to it, would be the best way to tackle this.

 

Of course create a new ScrollSmoother instance and have all the content on each page will also work and make it simpler but repetitive. Now in this case writing a small snippet of code and adding a couple of extra DOM elements to each page shouldn't hurt performance at all.

 

Unfortunately I don't have time to create that demo right now, but hopefully I'll be able to tackle it in the upcoming days.

 

Happy Tweening!

[eliphino]

Thanks for your insight @Rodrigo! I will continue just dropping in the snippet on page components but would be super interested to see how it would be achieved with context.

 

thanks again!

tom