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

y: 0,
      }
    )

    const animation = new TimelineLite({ paused: true })

    // timeline.to(header, 2, { rotationX: 0, scale: 1.3 })

    const path = 'M0,0 C0.46,0 0.804,0.243 0.87,0.368 0.928,0.478 0.884,0.4 1,1'
    const ease = CustomEase.create('steep-fall', path)
    TweenLite.set(header, headerStart)
    TweenLite.set(introPara, {
      x: -50,
      opacity: 0,
    })
    TweenLite.set(logos, {
      opacity: 0,
    })
    TweenLite.set(comingSoon, {
      x: -300,
      scale: 0.3,
      opacity: 0,
    })

    animation
    .delay(0.6) // wait for browser to not be busy. todo requestIdleCallback
    .to(header, 1, {
      ...headerDest,
      ease: Power2.easeIn,
    })
    .to(introPara, 1.5, {
      x: 0,

function showBasicOverlay(overlay, onComplete) {
            if (!overlay) {
              console.log("Error: no overlay argument provided to showBasicOverlay().");
              return;
            }
            if (activeOverlay) { //if there's already one open, immediately close it.
              TweenLite.set(activeOverlay, {autoAlpha: 0, display: "none"});
              if (overlayZIndex) {
                activeOverlay.style.zIndex = overlayZIndex;
              } else {
                TweenLite.set(activeOverlay, {clearProps: "zIndex"});
              }
              if (exportedRoot) {
                exportedRoot.resume();
              }
            }
            activeOverlay = overlay[0] || overlay; //in case it's a jQuery object.
            overlayZIndex = activeOverlay.style.zIndex;
            if (window.TimelineLite) {
              exportedRoot = TimelineLite.exportRoot().pause();
            }
            TweenLite.set(activeOverlay, {opacity: 0, xPercent: -50, yPercent: -50, x: 0, display: "block", zIndex: 5000, top: "50%", left: "50%", position: "fixed", maxHeight: "98%", bottom: "auto", right: "auto"});
            TweenLite.to(dimmer, 0.25, {autoAlpha: 0.6, ease: Linear.easeNone});
            TweenLite.to(activeOverlay, 0.25, {autoAlpha: 1, force3D: true});
            overlayOnComplete = onComplete;
            return false;
          }

;(function () {
          var dimmer = document.getElementById("overlay-dimmer"),
            activeOverlay, overlayZIndex, exportedRoot, overlayOnComplete;
          if (!dimmer) {
            dimmer = document.createElement("div");
            dimmer.setAttribute("id", "overlay-dimmer");
            dimmer.style.cssText = "width: 100%; height: 100%; background-color: black; opacity: 0.5; position: fixed; top: 0;left: 0; z-index: 4000; cursor: pointer; visibility: hidden;";
            TweenLite.set(dimmer, {force3D: true});
            (document.body || document.documentElement).appendChild(dimmer);
          }
          function showBasicOverlay(overlay, onComplete) {
            if (!overlay) {
              console.log("Error: no overlay argument provided to showBasicOverlay().");
              return;
            }
            if (activeOverlay) { //if there's already one open, immediately close it.
              TweenLite.set(activeOverlay, {autoAlpha: 0, display: "none"});
              if (overlayZIndex) {
                activeOverlay.style.zIndex = overlayZIndex;
              } else {
                TweenLite.set(activeOverlay, {clearProps: "zIndex"});
              }
              if (exportedRoot) {
                exportedRoot.resume();

function showOnly(target, set) {
            TweenLite.set(target, {display: ""});
            TweenLite.set(set.not(target), {display: "none"});
          }

targets.forEach((item) => {
    if (item.target) {
      TweenLite.set(item.target, { clearProps: 'all' });
    }
  });
}

function showOnly(target, set) {
            TweenLite.set(target, {display: ""});
            TweenLite.set(set.not(target), {display: "none"});
          }

clear = () => {
    const { onDragMarkerReset } = this.props;

    if (!this.rangeIn || !this.rangeOut || !this.fill) {
      return;
    }

    this.markerIn = 0;
    this.markerOut = this.range.offsetWidth;

    if (onDragMarkerReset) {
      onDragMarkerReset();
    }

    TweenLite.set(
      this.rangeIn,
      { left: 0 },
    );

    TweenLite.set(
      this.rangeOut,
      { right: 0 },
    );

    TweenLite.set(
      this.fill,
      {
        left: 0,
        width: 0,
      },
    );

function onRepeat() {
          if(count<99){
            count++
          }
          else{
            count = 0;
          }
          box.innerHTML = count;
          TweenLite.set(box, {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"});
        }						
      },

autoAlpha: 0, display: "none", onComplete: function () {
                  if (overlayZIndex) {
                    activeOverlay.style.zIndex = overlayZIndex;
                  } else {
                    TweenLite.set(activeOverlay, {clearProps: "zIndex"});
                  }
                  activeOverlay = null;
                  if (exportedRoot) {
                    exportedRoot.resume();
                  }
                }
              });