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

this.explorer.rotationVelocity = 0.02;

        this.explorer.on("pointerdown", () => {
            this.explorer.rotationVelocity *= -1;
        });

        // Add the explorer to the scene we are building
        this.app.stage.addChild(this.explorer);

        // Listen for frame updates
        this.app.ticker.add(() => {
            // each frame we spin the explorer around a bit
            this.explorer.rotation += this.explorer.rotationVelocity;
        });

        TweenLite.to(this.explorer, 2, {y: this.app.initialHeight / 2});
    }

openUser () {
        // Close panel if open
        this.closeMenu()
        this.closeSearch()
        this.closeTree()

        // Translate user panel
        TweenLite.to(this.$userActions, 0.6, {x: 0, ease: Expo.easeOut})

        if (this.$mainContentOverlay.length) {
            this.$mainContentOverlay[0].style.display = 'block'
            TweenLite.to(this.$mainContentOverlay, 0.6, {opacity: 0.5, ease: Expo.easeOut})
        }

        // Add active class
        this.$userPicture.addClass('active')
        this.userOpen = true
    }

function highlightMenuEase(name) {
            if (highlightTween) { //a simple, performant way to unhighlight the previous ease.
              if (highlightTween.target.textContent !== name) { //if it's the same target, it means the user clicked on the already-highlighted ease, so do nothing.
                TweenLite.to(highlightTween.target, 0.2, {backgroundColor: "rgba(0,0,0,0)", color: "#626262", clearProps: "backgroundColor,color"});
              } else {
                return true;
              }
            }
            var i = $menuEases.length;
            while (--i > -1) {
              if ($menuEases[i].textContent === name) {
                highlightTween = TweenLite.to($menuEases[i], 0.2, {backgroundColor: "#88CE02", color: "black"});
              }
            }
            $menuEases.siblings(".ease_type_section").css("visibility", (name === "Rough" || name === "Stepped" || name === "SlowMo" || name === "Power0" || name === "Custom") ? "hidden" : "visible");
          }

ease = data.currentEase || Linear.easeNone,
              mainEase = data.currentEaseName,
              fullEaseName = mainEase + "." + data.currentEaseType,
              customString = ((fullEaseName !== "Elastic.easeOut" && mainEase !== "Back") || (fullEaseName === "Elastic.easeOut" && ease._p1 === 1 && ease._p3 === 0.075) || (mainEase === "Back" && ease._p1 === 1.7)) ? customStrings[fullEaseName] : null, //note: we created a simplified version of Elastic.easeOut and the Back eases, but only with the default configuration so if there is any customization, we should just do the auto-tracing.
              $customPath = vis.find(".custom_path"),
              path, simplified;
            if (customString) {
              $customPath.text(customString);
              path = customSVG[fullEaseName];
            } else {
              path = CustomEase.getSVGData(ease, {width: 500, height: 500, precision: precision});
              simplified = ease.rawBezier ? path : PathEditor.simplifySVG(path, {tolerance: (precision === 1) ? 3 : 1, cornerThreshold: (mainEase === "Bounce") ? 130 : (mainEase === "SteppedEase" || mainEase === "RoughEase") ? 180 : 0});
              $customPath.text(CustomEase.getSVGData(new CustomEase("custom", simplified, {height: 500}), {width: 1, height: -1, y: 1, precision: precision}));
            }
            if (isLoaded) {
              TweenLite.to(".graph_path", 0.4, {morphSVG: path});
              vis.find(".graph_path_reveal").attr("d", path);
            }
          }

function hideBasicOverlay() {
            if (activeOverlay) {
              TweenLite.to(dimmer, 0.2, {autoAlpha: 0, ease: Linear.easeNone, onComplete: overlayOnComplete});
              TweenLite.set(activeOverlay, {
                autoAlpha: 0, display: "none", onComplete: function () {
                  if (overlayZIndex) {
                    activeOverlay.style.zIndex = overlayZIndex;
                  } else {
                    TweenLite.set(activeOverlay, {clearProps: "zIndex"});
                  }
                  activeOverlay = null;
                  if (exportedRoot) {
                    exportedRoot.resume();
                  }
                }
              });
            }
          }

function checkVertical(vis) { //Elastic.easeOut needs more room up top.
            var main_ease_class_select = vis.find(".main_ease_class_select").val();
            var basic_ease_type_select = vis.find(".basic_ease_type_select").val();
            var target_select = vis.find(".target_select").val();
            var tall = (target_select === "graph" && (main_ease_class_select === "CustomEase" || (main_ease_class_select === "Elastic" || main_ease_class_select === "Back" || (main_ease_class_select === "RoughEase" && vis.find(".rough_ease_class_select").val() === "Elastic" && vis.find(".rough_ease_type_select").val() === "easeOut"))));
            if (tall) {
              TweenLite.to(vis, 0.5, {paddingTop: 250, ease: Power2.easeInOut});
              TweenLite.to(vis.find(".ease_menu"), 0.5, {top: 250, ease: Power2.easeInOut});
              TweenLite.to(vis.find("#graph_path").find("rect"), 0.5, {attr:{y:-200}, ease:Power2.easeInOut});
            } else { //we decided not to animate BACK after going tall because it's annoying.
              TweenLite.to(vis, 0.3, { paddingTop:100, ease:Power2.easeInOut });
              TweenLite.to(vis.find(".ease_menu"), 0.3, {top:100, ease:Power2.easeInOut});
              TweenLite.to(vis.find("#graph_path").find("rect"), 0.3, {attr:{y:0}, ease:Power2.easeInOut});
            }
          }

increase: function (workflowNode) {
        let originalRadius = workflowNode.r;
        let targetRadius = originalRadius + 5;

        let targetFillColorClass = calculateFillColorClass(workflowNode.r);

        TweenLite.to(
          workflowNode,
          1,
          {
            r: targetRadius,
            fillClass: targetFillColorClass
          }
        );
      },
      decrease: function () {

const mouseLeave = useCallback(() => {
		if (ref && ref.current && animationComplete) {
			TweenLite.to(ref.current, 0.5, {
				ease: 'sine.out',
				opacity: 0.8,
			})
		}
	}, [animationComplete])

const slideRight = () => {
        TweenLite.to(sliderRef.children, .7, {opacity: .3, ease: Power3.easeOut});
        cardWidth = sliderRef.firstElementChild.clientWidth;
        if (selectedIndex < (sliderRef.children.length - 1)) {
            selectedIndex++;
            TweenLite.to(sliderRef, .7, {x: -selectedIndex * cardWidth, ease: Power3.easeOut});
        }
        selected = [sliderRef.children[selectedIndex], sliderRef.children[selectedIndex + 1], sliderRef.children[selectedIndex + 2]]
        TweenLite.to(selected, .7, {opacity: 1, ease: Power3.easeOut});
    };