Scrollmagic: How use Scroll magic in React JS?

[EmmanuelSkapple]

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.

Like this: https://cockta.eu/en/#new_look_legendary_taste

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.

This is my code but nothing happens. Please help me, I do not know how to advance in this.

   `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 (
   <div className="App">
    <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <h1 className="App-title">Welcome to React</h1>
   </header>
<p className="App-intro">
  To get started, edit <code>src/App.js</code> and save to reload.
</p>

    <div className="spacer s1"></div>
    <div id="trigger" className="spacer s1"></div>
    <div className="spacer s0"></div>
    <div id="pin" className="box1 red">
       <p>Unpinned.</p>
       <a href="#" className="viewsource">view source</a>
     </div>
     <div className="spacer s2"></div>


   </div>
      );
   }
 }`

[atav32]

Take a look at this, https://codepen.io/atav32/pen/rZobYG (I forget where I found the original example.)

You can add the ScrollMagic code right after the GSAP tween function.

[xavierartot]

Why do you use jQuery with React, you need to keep your states clean.
The immutability is the think, don't forget to stay in functional programming.
Nothing going to work this way.
Please indent your code!
Just don't use React or learn it before to do more complicated