How to use the gsap.TweenMax.fromTo function in gsap

immediateRender: true,
    };

    if (props.set) {
      // Sets properties to an absolute state.
      TweenMax.set(element, props.set);
    }

    if (this.tween) {
      // Remove previously set tween.
      this.tween.kill();
    }

    if (props.from && props.to) {
      // Starts a {from} -> {to} transition.
      this.tween = TweenMax.fromTo(element, duration, props.from, {
        ...props.to,
        ...transitionSettings,
      });
    } else if (props.from) {
      // Starts a {from} only transition.
      this.tween = TweenMax.from(element, duration, {
        ...props.from,
        ...transitionSettings,
      });
    } else if (props.to) {
      // Starts a {to} only transition.
      this.tween = TweenMax.to(element, duration, {
        ...props.to,
        ...transitionSettings,
      });
    }

tableBlinkAnimation(side) {
    const table = this.scene.getObjectByName(side);
    if (!table) return;
    const brightenedColor = `#${table.material.color.clone().lerp(new Color(0xffffff), 0.5).getHexString()}`;
    const no = {
      color: `#${table.material.color.getHexString()}`,
    };
    const BLUE_TABLE = `#${new Color(this.config.colors.BLUE_TABLE).getHexString()}`;
    const GREEN_TABLE = `#${new Color(this.config.colors.GREEN_TABLE).getHexString()}`;
    const to = this.communication.isHost ? BLUE_TABLE : GREEN_TABLE;
    TweenMax.fromTo(no, 0.8, {
      color: brightenedColor,
    }, {
      color: to,
      ease: Power4.easeOut,
      onUpdate: () => {
        table.material.color.set(no.color);
      },
    });
  }

haloAnimation(position) {
    this.halo.position.copy(position);
    TweenMax.fromTo(this.halo.material, 1, {
      opacity: 0.2,
    }, {
      opacity: 0,
    });
    TweenMax.fromTo(this.halo.scale, 1, {
      x: 0.001,
      y: 0.001,
      z: 0.001,
    }, {
      x: 1,
      y: 1,
      z: 1,
      ease: Expo.easeOut,
    });
  }

_animatePostIn() {
    const post = this._post
    if (post) {
      TweenMax.fromTo(post, 0.5, {
        opacity: 0
      }, {
        opacity: 1
      })
    }
  }

haloAnimation(position) {
    this.halo.position.copy(position);
    TweenMax.fromTo(this.halo.material, 1, {
      opacity: 0.2,
    }, {
      opacity: 0,
    });
    TweenMax.fromTo(this.halo.scale, 1, {
      x: 0.001,
      y: 0.001,
      z: 0.001,
    }, {
      x: 1,
      y: 1,
      z: 1,
      ease: Expo.easeOut,
    });
  }

export function buildToggleAnimation(original: Element, target: Element): void {
    TweenMax.to(original, 0.2, {x: 20, opacity: 0, display: 'none', scale: 0.3, ease: Power2.easeInOut});
    TweenMax.fromTo(target, 0.2,
        {x: -20, opacity: 0, scale: 0.3, display: 'none'},
        {x: 0, opacity: 1, display: 'block', scale: 1, ease: Power2.easeInOut}
    );
}

enter(el, done) {
      TweenMax.fromTo(
        el,
        0.2,
        {
          opacity: 0,
          scale: 0
        },
        {
          opacity: 1,
          scale: 1,
          ease: Sine.easeOut
        }
      )
      TweenMax.staggerFromTo(
        el.childNodes,
        0.45,
        {

changeScene(name,playerCoords){
    //Music
    if(this.activeScene!==undefined){
      //this.sound.stop(this.activeScene.music);
      if(this.activeScene.music!==undefined) this.music[this.activeScene.music].stop();
    }
    this.app.stage.addChild(this.blackScreen);
    if(this.tween) this.tween.kill();
    this.tween=TweenMax.set(this.blackScreen, {alpha:0});
    this.tween=TweenMax.fromTo(this.blackScreen, 1,
      {alpha:0},
      {alpha:1, onComplete:this.fadeOutEnd.bind(this),
        onCompleteParams:[name,playerCoords]});
  }

componentWillEnter (callback) {
		const el = findDOMNode(this);
		TweenMax.fromTo(el, 0.5, {z: 100, rotationY:0, opacity: 0, transformPerspective:200}, {z: 0, rotationY:0, opacity: 1, transformPerspective:200, onComplete: callback});
	}