How use Scroll magic in React JS

Question

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>
   );
  }
}

Answer 1

First of all, you should not use jQuery inside your react app. You also don't need the $(document).ready() inside your componentDidMount function, because if this function get call, the document will always be ready.

I never worked with ScrollMagic before, but here is a "clean up" version of your code like I would do it "the react way":

Attention: Code is not tested!

import React, { Component } from 'react';
import logo from './logo.svg';
import ScrollMagic from 'scrollmagic';
import './App.css';

class App extends Component {

    constructor(props) {
        super(props);
        this.controller = new ScrollMagic.Controller();
        this.state = {
            pinText: 'Unpinned.'
        };
    }

    componentDidMount() {

        // build scenes
        new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150})
            .setPin("#pin")
            .setClassToggle("#pin", "green")
            .on("enter leave", this.updateBox)
            .addIndicators() // add indicators (requires plugin)
            .addTo(this.controller);

        new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 300})
            .setPin("#pin")
            .setClassToggle("#pin", "green")
            .on("enter leave", this.updateBox)
            .addIndicators() // add indicators (requires plugin)
            .addTo(this.controller);

        new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 600})
            .setPin("#pin")
            .setClassToggle("#pin", "green")
            .on("enter leave", this.updateBox)
            .addIndicators() // add indicators (requires plugin)
            .addTo(this.controller);

    }

    updateBox = (e) => {
        let newPinText = '';
        if (e.type === "enter") {
            newPinText = 'Pinned.';
        }else {
            newPinText = 'Unpinned.';
        }
        this.setState({ pinText: newPinText });
    };

    render() {
        const { pinText } = this.state;
        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>

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

            </div>
        );
    }
}