facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.74k stars 26.86k forks source link

React + GSAP -> Animation doesn't work with Build production #5605

Closed AlexBrasileiro closed 6 years ago

AlexBrasileiro commented 6 years ago

Is this a bug report?

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

npx create-react-app gsapApp

package.json


"homepage": ".",
"dependencies": {
  "gsap": "^2.0.2",
  "react": "^16.6.0",
  "react-dom": "^16.6.0",
  "react-scripts": "^2.0.5"
},
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},
"devDependencies": {},
"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]

manifest.json


"start_url": "."

Steps to Reproduce

  1. When running the project with the server with react-scripts start, the animation runs perfectly. : D
  2. However ... when creating the bundle for production, using the react-scripts build command the animation simply does not work: :'(
  3. I'll provide the code below to show it happening

Expected Behavior

Actual Behavior

react gsap

Reproducible Demo

App.js


import React, { Component } from 'react';
import { TweenLite } from 'gsap/all';

class App extends Component {

  componentDidMount() {
    setTimeout(() => {
      console.log('animate init', true)
      TweenLite.to(this.myPRef, 2, {
        x: 200
      })
    }, 2000)
  }

  render() {
    return (
      <p ref={ref => this.myPRef = ref}>React + GSAP</p>
    );
  }
}

export default App;

Any idea? :)

p.s: I'll post this behavior also on GSAP's Github, to see if this could be a GSAP bundle-related issue.

Thanks for the help, Alex.

AlexBrasileiro commented 6 years ago

The gotcha it's just to make a CSSPlugin reference in code. https://github.com/greensock/GreenSock-JS/issues/285#issuecomment-433729632