React gsap.register issues in React + typescript

[Michel Ribeiro Araujo]

Hi guys! Good morning.

I'm newbie with GSAP and i'm learning it but i'm also trying to use it in my react project. 

 

so, i'll show peaces of my code before i explain the error:

 

import { gsap, TweenLite } from 'gsap';
class MainScreen extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    gsap.registerPlugin(TweenLite);

    this.state = {
      myElement: null,
      myTween: null,
      canInitCircles: true,
    };
  }

private initCircles = (div: any, canInitCircles: boolean) => {
    if (canInitCircles) {
      this.setState({
        myElement: div,
        myTween: TweenLite.to(this.state.myElement, 1, { x: 500, y: 500 }),
        canInitCircles: false,
      });
    }
  };

public render() {
    const { classes } = this.props;
    const { canInitCircles } = this.state;
    return (
      <Wrapper className={classes.root}>
        <Circles ref={(div: any) => this.initCircles(div, canInitCircles)} />
        <Planet />
        <Navbar />
      </Wrapper>
    );
  }

nothing hard to understand! I have a component called Circles which is a bundle of img html tags with some SVG in each of then and i'm trying to move this component, just to practice GSAP with React.  (note: the prop 'ref' in Circles component, receive any).

 

but i'm taking this warning:

 

 

can anyone knows what its going on? i had already registered the TweenLite plugin at the constructor method. 

 

Also, i installed the GSAP by NPM, see on my package.json:

 

"gsap": "^3.1.1",

[ZachSaucier]

Hey Michel and welcome to the GreenSock forums! 

 

"GSAP target null not found" means that the target for your tween is null. So this.state.myElement isn't actually pointing to the DOM element when initCircles is called. If you fix that, you will fix those warnings  

 

Maybe try using div instead of this.state.myElement in the tween? My guess is that React hasn't set this.state.myElement yet because you have both within the same setState call. A live demo using something like StackBlitz or CodeSandbox would be helpful.

[Michel Ribeiro Araujo]

ok, i fix the error with target but i'm already taking this two:

 

 

my code now: 

 

class MainScreen extends React.Component<IProps> {
  constructor(props: IProps) {
    super(props);
    gsap.registerPlugin(TweenLite);
  }
  componentDidMount() {
    TweenLite.to(Circles, 1, { x: 100, y: 100 });
  }

  
  public render() {
    const { classes } = this.props;
    const circles = React.createRef();
    return (
      <Wrapper className={classes.root}>
        <Circles ref={circles} />
        <Planet />
        <Navbar />
      </Wrapper>
    );
  }
}

 

 

[ZachSaucier]

Circles is evidently not a DOM element. If it was, x and y would be recognized. Make sure a DOM element is the target.

[OSUblake]

And you don't need TweenLite, so there is no need to import it, nor would you ever need to register it. Registering is for plugins. 

 

This is correct syntax for gsap 3+.

 

gsap.to(this.circles, {
  duration: 1,
  x: 100,
  y: 100
});

 

Of course you need to make sure this.circles is an element.

 

 

[Michel Ribeiro Araujo]

Thank you guys. I made some changes and now its works fines!