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

[AlexBrasileiro]

Is this a bug report?

• Maybe Yes? || A doubt :)

Did you try recovering your dependencies?

• Yes

Which terms did you search for in User Guide?

• Yarn Build: Animation Failing

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

• That the animation works normally

Actual Behavior

• Animation does not happen. In the video below: 1) On the Left: project running with yarn start, adding 2 seconds of delay to view a console along with animation start. 2) On the Right: project running on a static server withe the build folder after run yarn build. The console after 2 seconds runs, the animation does not.

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 facebook/create-react-app's Github, to see if this could be a Build Scripts bundle-related issue.

Thanks for the help, Alex.

[jackdoyle]

It sounds like you just forgot to include CSSPlugin - remember, that's necessary in order for GSAP to animate CSS-related values like transforms. CSSPlugin is already included in TweenMax, so you could just switch from TweenLite to TweenMax.

Also, if you're implementing tree shaking you may need to specifically reference CSSPlugin somewhere in your code so that it doesn't get dumped by your bundler.

[AlexBrasileiro]

@jackdoyle : thank you for your reply. I'll implement the code again by looking at your ideas to see if it works. Thanks again, I'll be back with the answers soon ....

[AlexBrasileiro]

@jackdoyle : I think the question was actually in the tree shaking. After doing some research on i find this answer: https://greensock.com/forums/topic/15749-gsap-with-create-react-app/?do=findComment&comment=80369

It was just enough to make a CSSPlugin reference in code that worked exactly as it should.

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

const C = CSSPlugin;  // here is the gotcha....

class App extends Component {

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

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

export default App;

Thanks :) Alex

[jackdoyle]

Excellent, thanks for letting us know that it's resolved. Happy tweening!

[morphatic]

This also applies to Vue + GSAP

Thanks!!!

[entozoon]

So this is still a bug, right? I mean, should the issue be re-opened, or passed over to create-react-app? The workaround surely works (thanks @AlexBrasileiro !) but it is working around a bug..

[jackdoyle]

So this is still a bug, right? I mean, should the issue be re-opened, or passed over to create-react-app? The workaround surely works (thanks @AlexBrasileiro !) but it is working around a bug..

Nah, it's not a bug at all. This is just caused by your build system being over-aggressive and dumping CSSPlugin because it's not referenced anywhere in your code directly. I can't imagine what we could do to "fix" the "bug", but I'm certainly open to suggestions. We already reference CSSPlugin in the TweenMax file.

[entozoon]

I take your point, yeah. Would still describe at as a bug though, with create-react-app's webpack perhaps, insofar as a build doesn't work by default and the solution isn't something you could intuit.

I can see there's an effort against the tree shaking which is cool but like, if that reference isn't being compiled/noticed then whaddyagonnado 🤷‍♂ perhaps a lost cause..

[jackdoyle]

I see your point, but I have no idea what could possibly be done about it. Do you? I definitely feel like it wouldn't be fair to call it a "bug" in GSAP. If anyone has suggestions for what we can do, I'm all ears :)

[SahilZala]

"I have used the class component with gsap as shown below, and it has worked for me by inserting CSSPlugin."

import React from "react"; import './home_view.css'; import Navbar from "../../Components/Navbar/navbar"; import CustomeCarousel from "../../Components/Carousel/custome_carousel"; import OurStory from "../../Components/OurStory/our-story"; import DescriptionLabel from "../../Components/DescriptionLabel/description-label"; import gsap from "gsap/gsap-core"; import { Expo } from "gsap"; import MarqueeBanner from "../../Components/MarqueeBanner/marquee_banner"; import { CSSPlugin } from "gsap/CSSPlugin"; // import Footer from "../../Components/Footer/footer"; // const C = CSSPlugin; export default class HomeView extends React.Component { constructor(){ super();

    this.gsap = gsap;
    this.gsap.registerPlugin(CSSPlugin);
    this.effect = Expo.easeInOut;
}

render(){
    return(
        <section id="main">
                <section id="nav-section">
                <Navbar gsap={this.gsap} effect={this.effect}/>
            </section>

            <section id="crousal-section">
                <CustomeCarousel/>
            </section>
            <br/>
            <br/>
            <section id="ourstory-section">
                <OurStory/>
            </section>
            <br/>
            <br/>
            <section id="description-lable"> 
                <DescriptionLabel gsap={this.gsap} effect={this.effect}/>
            </section>
            <br/>
            <br/>
            <section id="marquee-banner"> 
                <MarqueeBanner gsap={this.gsap} effect={this.effect}/>
            </section>
            <br/>
            <br/>

            {/* <section id="top-pics-section">
                <TopPicsProducts/>
            </section>
            <br/>
            <br/>
            <section id="core-details-section">
                <CoreDetails/>
            </section>  
            <br/>
            <br/> */}

            <section id="footer-section"> 
                {/* <Footer/> */}
            </section>
        </section>
    );
}

}