scrollmagic

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 integrate it into a Next.js React app with server-side rendering I can't use it since it relays on jQuery, which doesn't support SSR. Therefore I've tried my luck with ScrollMagic , which doesn't relay on jQuery. But it also doesn't support SSR (needs window ), therefore I've initialized it in the componentDidMount() method and even loaded it there (like it's recommended here ). It currently works initially, but as soon as you

Does anybody know how can I use ScrollMagic to have an effect like here http://appliancetecltd.com/ . I want something like that, but I need more movement something like this See Image , but I don't know how to use it, there is no much documentation about it's usage, can anybody help me? I have some code here: new ScrollScene({ triggerElement: "span.pin-trigger", duration: 500, offset: 650 }); var moveleft = TweenMax.to("#pin-inner", 1, { left: leftpinpx, ease: Sine.easeInOut }); new ScrollScene({ triggerElement: "span.pin-trigger", duration: 950 }).addTo(controller).setPin("#pin-outer")

In order to use ScrollMagic with GSAP , you need to load the animation.gsap.js plugin. With Webpack you would do something like this to accomplish that (assuming you use the CommonJS syntax and installed everything with npm): var TweenMax = require('gsap'); var ScrollMagic = require('scrollmagic'); require('ScrollMagicGSAP'); To make sure that this actually works, you have to add an alias to your Webpack configuration, so that Webpack knows where the plugin lives. resolve: { alias: { 'ScrollMagicGSAP': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap' } } Unfortunately ,

I have a onepager site where I use scrollmagic plus all its necessary plugins/libraries (and jQuery) for different effects where animation, pinning, fading processes etc. are triggered by scroll positions. I also use it for animated scrolling to the anchor points on the page (from the menu and from other local links) - see the according part of the script below. The problem is that this script suppresses the default behaviour of "jumping" directly to an anchorpoint when a local link is clicked, and apparently also when the page is accessed from outside via a direct link or bookmark with an