How to use the gsap.fromTo function in gsap

in(view, done) {
    // Animation
    Tween.fromTo(view, 0.5,
      { x: -40, opacity: 0 },
      {
        x: 0,
        opacity: 1,
        onComplete: done
      }
    );
  }

in({ from, to, done }) {
    // Reset Scroll
    window.scrollTo(0, 0);

    // Animation
    Tween.fromTo(to, 0.5,
      { opacity: 0 },
      {
        opacity: 1,
        onComplete: done
      }
    );

    // Animation
    Tween.fromTo(from, 0.5,
      { opacity: 1 },
      {
        opacity: 0,
        onComplete: () => {
          // Set New View in DOM Stream
          to.style.position = 'static';

disappear = () => {
    const dist = 3 * this.props.r;
    TweenLite.fromTo(this._circleMask, 0.6, {
      attr: { cx: 0, cy: 0 }
    }, {
      attr: { cx: dist, cy: dist },
      ease: Power3.easeInOut,
    });
  }

onDragEnd: function () {
            	var joystick = self.refs.foreDragger;
            	fromTo(joystick, 0.1, {
            		transform: `translate3d(${this.newPos.x}px,${this.newPos.y}px,0px)`
            	},{
            		transform: 'translate3d(0px,0px,0px)'
            	});
            	if (self.props.data){
            		let obj = {
            			direction:{
            				x: self.props.data.thrusters.direction.x,
            				y: self.props.data.thrusters.direction.y,
            				z: 0,
            			}
            		};
            		self.props.operationChannel.push("update",{table:"systems",filter:{simulatorId:self.props.params.simulatorId,name:'Thrusters'},data:obj});
            	}
            	self.setState({
            		dragging:false

in(view, done) {
    TweenMax.fromTo(view, 1,
      { alpha: 0 },
      {
        alpha: 1,
        onComplete: done
      }
    );
  }

out(view, done) {
    TweenMax.fromTo(view, 1,
      { alpha: 1 },
      {
        alpha: 0,
        onComplete: done
      }
    );
  }
}

appear = () => {
    const dist = 3 * this.props.r;
    TweenLite.fromTo(this._circleMask, 1, {
      attr: { cx: dist, cy: dist }
    }, {
      attr: { cx: 0, cy: 0 },
      ease: Power3.easeInOut,
    });
  }

jelly = () => {
    TweenLite.fromTo(this._circle, 1.5, {
      attr:{ r: 0 }
    }, {
      attr:{ r: this.props.r },
      ease: Elastic.easeOut.config(1, 0.3)
    });
  }

[node1, node2, node3, node4].map(node => {
			var obj = { x: 0, y: 0 };
			gsap.fromTo(
				obj,
				{
					x: node.getPosition().x,
					y: node.getPosition().y
				},
				{
					x: Math.floor(Math.random() * 500),
					y: Math.floor(Math.random() * 500),
					duration: 0.8,
					onUpdate: () => {
						node.setPosition(obj.x, obj.y);
						engine.repaintCanvas();
					}
				}
			);
		});