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

};

    // show the first image
    document
      .querySelector('.image-wrapper__img[data-index="1"]')
      .classList.add("is-visible");

    const navItems = document.querySelectorAll(".nav__link");
    navItems.forEach(item => {
      item.addEventListener("mouseenter", handleMouseEnter);
      item.addEventListener("click", handleMouseClick);
    });

    this.nav.addEventListener("mouseleave", handleMouseLeave);

    const mainNavItemTween = TweenMax.to(this.cursorInner, 0.2, {
      scale: 0.8,
      borderColor: "#ffffff",
      ease: this.easing,
      paused: true
    });

    const mainNavItems = document.querySelectorAll(".demo-5 .content--fixed a");
    mainNavItems.forEach(item => {
      item.addEventListener("mouseenter", () => {
        mainNavItemTween.play();
      });
      item.addEventListener("mouseleave", () => {
        mainNavItemTween.reverse();
      });
    });
  }

initDemo() {
    const { Back } = window;
    this.cursor = document.querySelector(".arrow-cursor");
    this.cursorIcon = document.querySelector(".arrow-cursor__icon");
    this.cursorBox = this.cursor.getBoundingClientRect();
    this.easing = Back.easeOut.config(1.7);
    this.animationDuration = 0.3;
    this.cursorSide = null; // will be "left" or "right"
    this.cursorInsideSwiper = false;

    // initial cursor styling
    TweenMax.to(this.cursorIcon, 0, {
      rotation: -135,
      opacity: 0,
      scale: 0.5
    });

    document.addEventListener("mousemove", e => {
      this.clientX = e.clientX;
      this.clientY = e.clientY;
    });

    const render = () => {
      TweenMax.set(this.cursor, {
        x: this.clientX,
        y: this.clientY
      });
      requestAnimationFrame(render);

this.isStuck = false;
      TweenMax.to(this.outerCursor, 0.2, {
        width: this.outerCursorOriginals.width,
        height: this.outerCursorOriginals.height,
        opacity: 0.2,
        borderColor: "#ffffff"
      });
    };

    const linkItems = document.querySelectorAll(".browser-window__link");
    linkItems.forEach(item => {
      item.addEventListener("mouseenter", handleMouseEnter);
      item.addEventListener("mouseleave", handleMouseLeave);
    });

    const mainNavHoverTween = TweenMax.to(this.outerCursor, 0.3, {
      backgroundColor: "#ffffff",
      ease: this.easing,
      paused: true
    });

    const mainNavMouseEnter = () => {
      this.outerCursorSpeed = 0;
      TweenMax.set(this.innerCursor, { opacity: 0 });
      mainNavHoverTween.play();
    };

    const mainNavMouseLeave = () => {
      this.outerCursorSpeed = 0.2;
      TweenMax.set(this.innerCursor, { opacity: 1 });
      mainNavHoverTween.reverse();
    };

});

    const pswpContainer = document.querySelector(".pswp__container");
    pswpContainer.addEventListener("mouseenter", handleMouseEnter);

    const mainNavItems = document.querySelectorAll(".content--fixed a");
    mainNavItems.forEach(el => {
      el.addEventListener("mouseenter", () => {
        this.mainNavHoverTween.play();
      });
      el.addEventListener("mouseleave", () => {
        this.mainNavHoverTween.reverse();
      });
    });

    this.bumpCursorTween = TweenMax.to(this.outerCursor, 0.1, {
      scale: 0.7,
      paused: true,
      onComplete: () => {
        TweenMax.to(this.outerCursor, 0.2, {
          scale: 1,
          ease: this.easing
        });
      }
    });
  }

const onSwiperMouseLeave = e => {
      this.swiperBox = e.target.getBoundingClientRect();

      let outRotation = 0;
      if (this.clientY < this.swiperBox.top + this.swiperBox.height / 2) {
        outRotation = this.cursorSide === "right" ? -135 : -45;
      } else {
        outRotation = this.cursorSide === "right" ? 135 : -315;
      }

      TweenMax.to(this.cursorIcon, this.animationDuration, {
        rotation: outRotation,
        opacity: 0,
        scale: 0.3
      });

      this.cursorSide = null;
      this.cursorInsideSwiper = false;
    };

const render = () => {
      TweenMax.set(this.innerCursor, {
        x: this.clientX,
        y: this.clientY
      });
      if (!this.isStuck) {
        TweenMax.to(this.outerCursor, this.outerCursorSpeed, {
          x: this.clientX - this.outerCursorBox.width / 2,
          y: this.clientY - this.outerCursorBox.height / 2
        });
      }
      if (this.showCursor) {
        document.removeEventListener("mousemove", unveilCursor);
      }
      requestAnimationFrame(render);
    };
    requestAnimationFrame(render);

const mainNavItemMouseLeave = () => {
      this.outerCursorSpeed = 0.2;
      this.fillOuterCursor = false;
      TweenMax.to(this.innerCursor, 0.2, { opacity: 1 });
    };

return new Promise((resolve) => {
            TweenMax.to(this.oldPage.rootElement, 0.75, {
                alpha: 0
            })

            TweenMax.set(this.mainElement, {
                autoAlpha: 1,
                onComplete: () => {
                    TweenMax.staggerTo(this.horizontalElements, 0.5, {
                        scaleX: 1
                    }, 0.1)

                    TweenMax.staggerTo(this.verticalElements.reverse(), 0.5, {
                        scaleY: 1
                    }, 0.1, resolve)
                }
            })
        })

}
    });
    this.swiper.on("touchMove", e => {
      const { clientX, clientY } = e;
      this.clientX = clientX;
      this.clientY = clientY;

      this.cursorSide = this.clientX > window.innerWidth / 2 ? "right" : "left";

      TweenMax.to(this.cursorIcon, this.animationDuration, {
        rotation: this.cursorSide === "right" ? 0 : -180,
        ease: this.easing
      });
    });

    this.bumpCursorTween = TweenMax.to(this.cursor, 0.1, {
      scale: 0.85,
      onComplete: () => {
        TweenMax.to(this.cursor, 0.2, {
          scale: 1,
          ease: this.easing
        });
      },
      paused: true
    });

    this.swiper.on("slideChange", () => {
      this.bumpCursorTween.play();
    });
  }
}