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

tweenConfettiParticle(id) {
		const minAngle = this.confettiSprites[id].angle - SPREAD / 2;
		const maxAngle = this.confettiSprites[id].angle + SPREAD / 2;
		
		const minVelocity = this.confettiSprites[id].velocity / 4;
		const maxVelocity = this.confettiSprites[id].velocity;

		// Physics Props
		const velocity = loRandom(minVelocity, maxVelocity);
		const angle = loRandom(minAngle, maxAngle);
		const gravity = GRAVITY;
		// const friction = loRandom(0.1, 0.25);
		const friction = loRandom(0.01, 0.05);
		const d = 0;

		TweenMax.to(this.confettiSprites[id], DECAY, {
			physics2D: {
				velocity,
				angle,
				gravity,
				friction,
			},
			d,
			ease: Power4.easeIn,
			onComplete: () => {
				// remove confetti sprite and id
				loPull(this.confettiSpriteIds, id);
				delete this.confettiSprites[id];
			},
		});
	}

private getFadeAndShrinkAnimation(timeSeconds: number, repeat: boolean) {
    return TweenMax.to(this.widgetElement, timeSeconds, {
      repeat: repeat ? 1 : 0,
      backgroundColor: 'rgba(227,229,230,0.54)',
      scaleX: 0.5,
      scaleY: 0.5,
      yoyo: repeat,
      onStart: () => {
        console.debug('Loading animation: fade in and out start');
      },
      onComplete: () => {
        console.debug('Loading animation: fade in and out complete');
      },
    });
  }

show = () => {
        if (!this.active) {
            this.refs.dark.style.display = 'block';
            TweenMax.to(this.refs.dark, this.props.showAnimationTime, {
                css: {
                    opacity: 0.7
                }
            });
            this.refs.dialog.style.display = 'block';
            TweenMax.to(this.refs.dialog, this.props.showAnimationTime, {
                css: {
                    opacity: 1,
                    marginTop: 0
                }
            });
            this.active = true;
        }
    }

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

rumble = () => {
    Vibration.vibrate();

    TweenMax.to(this.position, 0.2, {
      x: 0,
      y: 0,
      z: 1,
    });
    TweenMax.to(this.position, 0.2, {
      x: 0,
      y: 0,
      z: 0,
      delay: 0.2,
    });
  };
}

drawWave() {
    if (this.playing) {

      this.analyser.getByteFrequencyData(this.frequencyData);

      for (var i = 0; i < 140; i++) {
        var p = this.frequencyData[i];
        var s = this.objects[i];
        var z = s.position;

        TweenMax.to(z, .2, {
          y: p / 20
        });

      }
    }
  }

anchor.addEventListener('click', (e)=>{
          e.preventDefault()
          browserHistory.push(target)
          TweenMax.to(window, 0.5, {
            scrollTo: {
              y: 0
            },
            ease: Power4.easeInOut
          })
        })
      }

openMenu() {
    TweenMax.to(this.threeDots.first.nativeElement, 0.2, {
      x: 18,
      ease: Sine.easeOut
    });
    TweenMax.to(this.threeDots.last.nativeElement, 0.2, {
      x: -18,
      ease: Sine.easeOut
    });
    TweenMax.staggerTo(
      [
        this.threeDots.first.nativeElement,
        this.threeDots.middle.nativeElement,
        this.threeDots.last.nativeElement
      ],
      0.2,
      {
        fill: '#7eebe6',