title: How use Scroll magic in React JS
body: <p>I have a page with React js and I want use scroll magic to make a waterfall animation where a bottle rotates when you scroll down.</p>
  
  <p>Like this: <a href="https://cockta.eu/en/#new_look_legendary_taste" rel="nofollow noreferrer">https://cockta.eu/en/#new_look_legendary_taste</a></p>
  
  <p>but I can not find any doc of how to use scroll magic in react js, the most I could find was the example of someone who, like me, does not work.</p>
  
  <p>This is my code but nothing happens.
  Please help me, I do not know how to advance in this</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import ScrollMagic from 'scrollmagic';
  import $ from 'jquery';
  import './App.css';
  
  
  
  
  
  
   class App extends Component {
  
     componentDidMount() { // wait for document ready
        var controller;
       $(document).ready(function($) {
      // init controller
       var controller = new ScrollMagic.Controller();
   });
  
   $(document).ready(function($) {
      function updateBox (e) {
        if (e.type == "enter") {
         ("#pin p").text("Pinned.") ;
        } else {
       ("#pin p").text("Unpinned.");
     }
   }
   // build scenes
   new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150})
     .setPin("#pin")
     .setClassToggle("#pin", "green")
     .on("enter leave", updateBox)
     .addIndicators() // add indicators (requires plugin)
     .addTo(controller);
  
   new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 300})
     .setPin("#pin")
     .setClassToggle("#pin", "green")
     .on("enter leave", updateBox)
     .addIndicators() // add indicators (requires plugin)
     .addTo(controller);
  
   new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 600})
     .setPin("#pin")
     .setClassToggle("#pin", "green")
     .on("enter leave", updateBox)
     .addIndicators() // add indicators (requires plugin)
     .addTo(controller);
    });
  // init controller
  
  // show pin state
  
    }
  
  
  
    render() {
     return (
       &lt;div className="App"&gt;
         &lt;header className="App-header"&gt;
          &lt;img src={logo} className="App-logo" alt="logo" /&gt;
          &lt;h1 className="App-title"&gt;Welcome to React&lt;/h1&gt;
         &lt;/header&gt;
      &lt;p className="App-intro"&gt;
        To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
      &lt;/p&gt;
  
      &lt;div className="spacer s1"&gt;&lt;/div&gt;
      &lt;div id="trigger" className="spacer s1"&gt;&lt;/div&gt;
      &lt;div className="spacer s0"&gt;&lt;/div&gt;
      &lt;div id="pin" className="box1 red"&gt;
          &lt;p&gt;Unpinned.&lt;/p&gt;
          &lt;a href="#" className="viewsource"&gt;view source&lt;/a&gt;
      &lt;/div&gt;
      &lt;div className="spacer s2"&gt;&lt;/div&gt;
  
  
    &lt;/div&gt;
     );
    }
  }
  </code></pre>