[gsap.set error in React]

i'll read! sry about my dumb questions xD

[gsap.set error in React]

oh, thank you! i'm takin this error now:

 

ReferenceError: Linear is not defined.

 

from here:

function animm(elm: any) {
      TweenMax.to(elm, R(0, 5) + 3, {
        y: h,
        ease: Linear.easeNone,
        repeat: -1,
        delay: -5,
      });

 

but i can see his value:

 

 

i know i can change this line to something like "easeInOut" but why i'm takin this error? i tried to import Linear but not success.

[gsap.set error in React]

Hi! i'm trying to create a confetti animation in my react projecta, following some tutorial and code example i found but there are something that im not understand. See code:

 

import React from 'react';
import { gsap, TweenMax } from 'gsap';

class Stars extends React.Component {
  render() {
    TweenMax.to('img', {
      xPercent: '-50%',
      yPercent: '-50%',
    });
    const total = 70;
    const container = document.getElementById('container');
    let w = container?.offsetWidth;
    let h = container?.offsetHeight;
    for (let i = 0, div; i < total; i++) {
      div = document.createElement('div');
      div.className = 'dot';
      container?.appendChild(div);
      gsap.set(div, {
        x: R(0, w || 1),
        y: R(-100, 100),
        opacity: 1,
        scale: R(0, 0.5) + 0.5,
        backgroundColor: 'hsl(' + R(170, 360) + ',50%,50%)',
      });
      animm(div);
    }
    function animm(elm) {
      TweenMax.to(elm, R(0, 5) + 3, {
        y: h,
        ease: Linear.easeNone,
        repeat: -1,
        delay: -5,
      });
      TweenMax.to(elm, R(0, 5) + 1, {
        x: '+=70',
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut,
      });
      TweenMax.to(elm, R(0, 1) + 0.5, {
        opacity: 0,
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut,
      });
    }
    return <p>oi</p>;
  }
}
export default Stars;

what is the "R" function which set a value to 'x' and 'y' coords?

 

[React gsap.register issues in React + typescript]

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

[React gsap.register issues in React + typescript]

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

 

 

[React gsap.register issues in React + typescript]

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",