[React and GSAP]

Zomg it worked Jack. This makes me very happy. Ok, so you handed me a fish. The question now becomes, how do I fish these import answers for myself? Is there documentation on what to import for a given operation?

 

import React, { Component } from 'react';
import {TweenLite, Linear} from 'gsap';
import TextPlugin from "gsap/TextPlugin";  // This worked! 

 

[React and GSAP]

I added this before but saw no difference:

 

import {TweenLite, Linear, TextPugin} from 'gsap';

 

I'll see what I can work up with the codesandbox in a bit.

[React and GSAP]

GSAP'ers, I'm trying to understand what I'm missing with a simple use case. I managed getting an example I found to work but when trying out something different out, I see no animations. Here is my simple ReactJS and GSAP test.

 

Package versions: gsap": "1.20.4", "react": "16.2.0"

 

 Viewing the console, there are no errors. I do see "onStart" and "onComplete" printed. But no animation. 

 

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

export default class TextExample extends Component {
  animate = () => {
    TweenLite.to(this.titleElement, 2, {text:this.props.endTitle, ease:Linear.easeNone})
             .eventCallback("onStart", () => {console.log("onStart");})
             .eventCallback("onComplete", () => {console.log("onComplete");});
  }

  render() {
    return (
      <div id="myId"
          ref={elm => this.titleElement = elm}
          onClick={this.animate}>
            {this.props.startTitle}
      </div>
    )
  }
}

 

[React and GSAP]

You probably want the ref to point to a raw dom element rather than a react component. Like so:

 

<div style={styles.box} ref={box => this.box = box} className="box" />