Next.js (React) & ScrollMagic

Question

I would like to implement an animation to fade sections, like in this example, into my application. Therefore I\'ve had a look at fullPage.js.

However, since I need to i

Answer 1

Although in some other venues people suggested using next/dynamic and importing the ScrollMagic library with the option 'ssr:false', I did not have success with this tactic. The ScrollMagic object was not returned correctly.

What ended up working for me was to use a modified version of the ScrollMagic library (modified by Jan Fischer: https://github.com/bitworking) in which the whole ScrollMagic library is wrapped "in a self invoking function so that I can mock the window and document object." I copied this modified ScrollMagic to my next.js project and referenced it instead of including the package as a node module.

Here is the modified file: https://raw.githubusercontent.com/bitworking/react-scrollmagic/master/src/lib/scrollmagic.js

Answer 2

Would fullpage.js not be more suited for you needs?

You should be able to map your routes and then build each slide as a placeholder for the page using the app.js

Otherwise, I should have a working example of scroll magic, I will look for the repo and share it once found.

UPDATE: Here is an example of next.js using fullpage.js

However, since I need to integrate it into a Next.js React app with server-side rendering I can't use it since it relays on jQuery

fullpage.js no longer depends on jquery and it supports SSR as well.