React Gatsby

[kempo]

I'm trying to get GSAP working in my React Gatsby project. I've made a simple test following @Rodrigo guide https://greensock.com/react

 

Here is my component - no animation and no errors either

 

import { TweenLite } from "gsap/TweenLite";

class Messages extends React.Component {
  constructor(props) {
    super(props);
    this.myElement = null;
    this.myTween = null;
  }

  componentDidMount() {
    this.myTween = TweenLite.to(this.myElement, 1, { x: 100, y: 100 });
  }

  render() {
    return (
      <div ref={div => (this.myElement = div)}>
        <img src={require("../images/logo.png")} width="50" />
      </div>
    );
  }
}

export default Messages;

 

[OSUblake]

You'll need the CSSPlugin for that to work. Check out the docs for help with npm.

https://greensock.com/docs/v2/NPMUsage

 

 

[ZachSaucier]

Alternatively, load TweenMax (which has CSSPlugin included).

[kempo]

thanks guys - sorted