title: Next.js (React) & ScrollMagic
body: <p>I would like to implement an animation to fade sections, like in <a href="https://alvarotrigo.com/fullPage/extensions/fading-effect.html" rel="noreferrer">this example</a>, into my application. Therefore I've had a look at fullPage.js.</p>
  
  <p>However, since I need to integrate it into a <a href="https://github.com/zeit/next.js" rel="noreferrer">Next.js</a> 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 <a href="http://scrollmagic.io/" rel="noreferrer">ScrollMagic</a>, which doesn't relay on jQuery. But it also doesn't support SSR (needs <code>window</code>), therefore I've initialized it in the <code>componentDidMount()</code> method and even loaded it there (like it's recommended <a href="https://github.com/zeit/next.js/issues/219#issuecomment-258966784" rel="noreferrer">here</a>).</p>
  
  <p>It currently works initially, but as soon as you change the page and an AJAX request is done and Next.js replaces the page, an error will be thrown (see below):</p>
  
  <blockquote>
    <p>Node was not found</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/4akZa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4akZa.png" alt="Node was not found React error when using ScrollMagic with Next.js"></a></p>
  
  <p>I've tried to destroy ScrollMagic before the AJAX request in <code>componentWillUnmount()</code>, but with no luck. I can't figure out what's wrong and unfortunately, I couldn't find any documentation about ScrollMagic with React or Next.js.</p>
  
  <p>This is my entire component:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  class VerticalSlider extends React.Component {
    constructor(props) {
      super(props);
      this.ScrollMagic = null;
      this.controller = null;
      this.scenes = [];
      this.container = React.createRef();
    }
  
    componentDidMount() {
      if (this.container.current) {
        // Why "require" here?
        // https://github.com/zeit/next.js/issues/219#issuecomment-393939863
        // We can't render the component server-side, but we will still render
        // the HTML
        // eslint-disable-next-line global-require
        this.ScrollMagic = require('scrollmagic');
        this.initScroller();
      }
    }
  
    componentWillUnmount() {
      this.scenes.forEach(scene =&gt; {
        scene.destroy();
      });
      this.controller.destroy();
      this.scenes = [];
      this.controller = null;
    }
  
    initScroller() {
      try {
        this.controller = new this.ScrollMagic.Controller();
        if (this.container.current !== null &amp;&amp; this.container.current.children) {
          [...this.container.current.children].forEach(children =&gt; {
            const scene = new this.ScrollMagic.Scene({
              triggerElement: children,
              duration: window.innerHeight * 1.5,
              triggerHook: 0,
              reverse: true
            });
            scene.setPin(children);
            this.scenes.push(scene);
          });
          this.controller.addScene(this.scenes);
        }
      } catch (e) {
        console.log(e);
      }
    }
  
    render() {
      return (
        &lt;div ref={this.container}&gt;
          {this.props.sections}
        &lt;/div&gt;
      );
    }
  }
  
  VerticalSlider.propTypes = {
    sections: PropTypes.arrayOf(PropTypes.node).isRequired
  };
  
  export default VerticalSlider;
  </code></pre>