ScrollSmoother with a react Framework?

[Alexander Verbeeck]

Is there any documentation on how to implement ScrollSmoother with a react Framework?

[Cassie]

Is there something you're struggling with specifically Alexander?

Here's a starter codesandbox. It's not pretty but should show you the setup!
 

https://codesandbox.io/s/quirky-brattain-qy6ubg?file=/src/styles.css

[Alexander Verbeeck]

Thank you very much! looks perfect that way, only problem is that when i implement the following:

import { ScrollTrigger } from "gsap/ScrollTrigger";
import { ScrollSmoother } from "gsap/ScrollSmoother";

I get The Server Error "Cannot use import statement outside a module.

 

 

Thanks in advance! 

(I'm new to Gsap with React (Nextjs.))

[Cassie]

Ok cool - next.js is different - its SSR so you can't use ES Modules - you need to import the UMD files instead

https://codesandbox.io/s/7x63i?file=/gsap.js:3-78

Hope this helps.

[Cassie]

Also we have some guides here
 

And here...
 

 

[denniszyche]

On 8/15/2022 at 2:25 PM, Cassie said:

Is there something you're struggling with specifically Alexander?

Here's a starter codesandbox. It's not pretty but should show you the setup!
 

https://codesandbox.io/s/quirky-brattain-qy6ubg?file=/src/styles.css

Hey Cassie. I used your example to init SmoothScroller in my react Project. 
Now I run into this error (Image). Any idea what I could have done wrong?

[Cassie]

Afraid not no - tagging in @Rodrigo because he's much more knowledgable with React than me

[Rodrigo]

Hi @denniszyche,

 

I googled about that error and couldn't find anything that tells me that it could be GSAP related.

 

Do you have a minimal demo that clearly shows how this is related to GSAP or any of our plugins? We have this starter template for using React with ScrollSmoother:

https://stackblitz.com/edit/react-iqmjfx?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!

[denniszyche]

3 hours ago, Rodrigo said:

Hi @denniszyche,

 

I googled about that error and couldn't find anything that tells me that it could be GSAP related.

 

Do you have a minimal demo that clearly shows how this is related to GSAP or any of our plugins? We have this starter template for using React with ScrollSmoother:

https://stackblitz.com/edit/react-iqmjfx?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!

@Cassie + @Rodrigo thanks for your fast answers. 

I think it is the connection of "react-router-dom" and "ScrollSmoother", because thats the only real difference to your examples. 

I hope I can create a quick demo soon, so I can share it with you. Thank you!

[Rodrigo]

Hi @denniszyche,

 

Sorry for the late response 🙏

 

I created an example using the latest version of React Router Dom with the latest version of GSAP/ScrollSmoother and can't replicate the issue you mention:

https://stackblitz.com/edit/stackblitz-starters-9xvpi2

 

If you can fork that and make it look like your setup and replicate the issue it'd help us to identify it. Just please remember to keep the demo as minimal as possible.

 

Happy Tweening!

[denniszyche]

On 10/20/2023 at 11:42 PM, Rodrigo said:

Hi @denniszyche,

 

Sorry for the late response 🙏

 

I created an example using the latest version of React Router Dom with the latest version of GSAP/ScrollSmoother and can't replicate the issue you mention:

https://stackblitz.com/edit/stackblitz-starters-9xvpi2

 

If you can fork that and make it look like your setup and replicate the issue it'd help us to identify it. Just please remember to keep the demo as minimal as possible.

 

Happy Tweening!

@Rodrigo sorry for my late reply. I just tested it. It works perfect now! Thank you so much!!!

[EjazZaman]

On 8/15/2022 at 6:54 PM, Alexander Verbeeck said:

Thank you very much! looks perfect that way, only problem is that when i implement the following:

import { ScrollTrigger } from "gsap/ScrollTrigger";
import { ScrollSmoother } from "gsap/ScrollSmoother";

I get The Server Error "Cannot use import statement outside a module.

 

 

Thanks in advance! 

(I'm new to Gsap with React (Nextjs.))

 

[Rodrigo]

Hi @EjazZaman and welcome to the GSAP Forums!

 

In Next is better to use the UMD modules instead of the ES modules:

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { ScrollSmoother } from "gsap/dist/ScrollSmoother";

 

Here is a simple demo of ScrollSmoother on a Next App:

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

 

Also I'd strongly recommend you to go through this article in order to learn how to use GSAP in React environments:

https://gsap.com/resources/React

 

Hopefully this helps.

Happy Tweening!