How to add ScrollMagic to react?

Question

At first, i tried to add scrollmagic with componentDidMount() but that scroll effect was acitvating with out any scroll just when page reloads already works. addIndicators() doesnt work and in console shows that (ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin 'debug.addIndicators'. Please make sure to include plugins/debug.addIndicators.js. Problems with adding SCROLLMAGIC My app uses bulma.

componentDidMount() {
      // Get all "navbar-burger" elements
      var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

      if ($navbarBurgers.length > 0) {
        $navbarBurgers.forEach(function ($el) {
          $el.addEventListener('click', function () {
            var target = $el.dataset.target;
            var $target = document.getElementById(target);
            $el.classList.toggle('is-active');
            $target.classList.toggle('is-active');

          });
      });
    }

    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({
      triggerElement: '#navbarAnchor',
    })
    .setClassToggle('#navbarAnchor', 'switch')
    .addIndicators({
        name: 'switch',
        colorTrigger: 'yellow',
        indent: 200,
        colorStart: 'orange',
        colorEnd: 'pink'
    })
    .addTo(controller);
  }

  render() {
    return (
      <nav ref={controller => this.controller = controller} id="navbarAnchor" className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">

        </div>
        <a role="button" className="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>

        <div className="navbar-menu" id="navMenu">
          <div className="navbar-start">
            <a className="navbar-item">Home</a>

            <div className="navbar-item has-dropdown is-hoverable">
              <a className="navbar-link has-background-none" >
                News
              </a>
              <div className="navbar-dropdown is-boxed has-background-black">
                <a className="navbar-item">
                  Front-End
                </a>
                <a className="navbar-item">
                  Back-End
                </a>
                <a className="navbar-item">
                  Digest
                </a>
                <a className="navbar-item">
                  Soccer
                </a>

              </div>
            </div>
          </div>
          <div className="navbar-end">
                <a className="navbar-item">Get Started</a>
          </div>
        </div>

      </nav>
    );
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>

componentDidMount, but

https://stackoverflow.com/questions/50680766/next-js-react-scrollmagic?noredirect=1#comment88691029_50680766 here is a similar discussion — amankkg, Jun 14 '18 at 19:23

How to add ScrollMagic to react?

0 Answers0