cannot get GSAP working on production in react

[Odi]

Hi, im self taught and very new to programming and tried to get Gsap to do a simple fade in out animation. (i know could be done in css). im using gsap 3.2.6.

 

This only worked in production and shot out the error :  Invalid property opacity set to 0 Missing plugin? gsap.registerPlugin(). it works completely find untill i put it on "firebase serve" or "firebase deploy".

 

the example is basically just a copy and paste from the documentation.

 

Sorry for the lack of code pen, but i feel like that wouldn't help as the exact problem with it is on npm run build and if there is a fix for this it seems very straightforward.

import React, { Component} from 'react';

import { FacebookProvider, EmbeddedPost } from 'react-facebook';

import F from "../land.module.scss"; 

import { TimelineLite, CSSPlugin } from "gsap/all";

 

export default class Example extends Component {

 

    constructor(props) {

        super(props);

        // logo container

        this.commentContainer = null;

        // logo tween

        this.Comments = null;

    }

 

    

        componentDidMount(){

            // create logo tween

            

            this.Comments = new TimelineLite({ paused:true })

            

            // .to(this.commentContainer, 2, { x: 300 })

            // .to(this.commentContainer, 1, { rotation: 360, transformOrigin: "center" })

            .fromTo(this.commentContainer, {opacity: 0}, {opacity: 1, duration: 1});

 

        }

    

    

  render() {

    return (

        <div>

            <button

                            // color="info"

                            //  className="btn gsap-btn"

                                onClick={() => this.Comments.play()}

                            >Look at how good people think we are </button>

 

      <FacebookProvider appId="''''''''" >

 

      <div className={`${F.fb} col-12 mt-3`} ref={ this_ => this.commentContainer = this_ }>

          

                  <EmbeddedPost href="h------" width="500" /> <button color="warning"

                                className="btn gsap-btn"

                                onClick={() => this.Comments.reverse()}

                            >or not</button>

      </div>

      </FacebookProvider></div>

    );

  }

}

 

 

 

[Odi]

i sprawled through the forums to try and find a relevant piece and adapt it to my work. There needs to be "

import { gsap, TimelineLite, CSSPlugin } from "gsap/all";

 

gsap.registerPlugin(CSSPlugin)"

 

Otherwise react does not work in production with GSAP. it does on localhost but not on anything after "npm run build" possibly due to either babble or webpack?

[elegantseagulls]

Hi @Odi,

 

I'd bet you'd have better luck if you used the current GSAP3 syntax. You shouldn't need to import css plugin, etc. There's no advantage to using TimelineLite anymore, as it's just an alias in gsap3.

 

All you should need need is to:

 

import gsap from 'gsap';

 

then for your timeline use:

 

this.Comments = gsap.timeline({ paused: true });

[Odi]

That also fixed the problem!

Thanks for the help, i will now use the new syntax. or at least use "import gsap" and then follow thorough with putting gsap. at the start of everything i use it for. 

[ZachSaucier]

We have a handy install helper to help with correctly importing and registering parts of GSAP until you get used to the syntax