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