How to use the gsap.TimelineMax function in gsap

let forceAnimation = false;
    if (this.isPlayingShowOrHideLoadingWidgetAnimation) {
      // Note: This happens when more than one of these animations are
      // constructed back to back, before the first has started, or if an
      // animation is killed before it can complete. In these cases we always
      // want to return the full desired animation, not the empty one.
      console.debug('Calling getUpdateStatusWidgetVisibility while '
                    + 'isPlayingShowOrHideLoadingWidgetAnimation = true. ');
      forceAnimation = true;
    }

    // If nothing has changed, return an empty animation.
    if (hide === this.shouldHideStatusWidget && !forceAnimation) {
      console.debug('Returning without update status widget visibility animation.');
      return new TimelineMax({});
    } else {
      console.debug('Getting update status widget visibility animation.');
    }

    this.isPlayingShowOrHideLoadingWidgetAnimation = true;
    const updateStatusWidgetVisibilityAnimation = new TimelineMax({
      onStart: () => {
        this.ngZone.run(() => {
          console.debug('Updating status widget visibility to '
                        + (hide ? 'hidden' : 'visible') + ' from '
                        + (this.shouldHideStatusWidget ? 'hidden' : 'visible'));
          // Disable hiding so animations will show up.
          this.shouldHideStatusWidget = false;
        });
      },
      onComplete: () => {

const space = (Math.floor(i / this.count) + 1) * diff;

            const linex = this.center + offsetX + (dists[0] - space) * x;
            const liney = this.center + offsetY + (dists[0] - space) * y;

            const start = { x2: linex, y2: liney };
            const end = { x1: linex, y1: liney };

            timeline.to(line, 0.7, { attr: start, ease });
            timeline.to(line, 1.3, { attr: end, ease }, "-=0.7");
            timeline.to(line, 0.5, { opacity: 0 }, "-=0.5");

            tlgroup1.push(timeline);
            if (i < this.count) {
                const timeline = new TimelineMax();

                const square = this.squares[i];
                const circle = this.circles[i];

                // animate square
                timeline.fromTo(square, 1.5, { rotation: i * 35, transformOrigin }, { rotation: "+=360", ease });
                timeline.add("start", "-=1.5");
                timeline.to(square, 1.5, { x: offsetX + dists[1] * x, y: offsetY + dists[1] * y, ease }, "start");
                timeline.from(square, 1.5, { scale: 0, ease }, "start");
                timeline.to(square, 1, { opacity: 0, ease }, "start+=0.8");

                // animate circle
                timeline.to(circle, 1.5, { x: offsetX + dists[2] * x, y: offsetY + dists[2] * y, ease }, "start+=0.3");
                timeline.from(circle, 1.5, { scale: 0, transformOrigin, ease }, "start+=0.3");
                timeline.to(circle, 1.5, { scale: 0, transformOrigin, ease }, "-=0.9");

getStartAnimationsForCircleSquareDiamondWidgetLoading(): TimelineMax {
    const startAnimationsTimeline = new TimelineMax({
      align: 'sequence',
    });

    // Start animations happen in three groups. Group 0 animations before
    // group 1, which animates before group 2. The animations within each
    // group start at the same time.
    const startAnimationsGroup0: Animation[] = [];
    const startAnimationsGroup1: Animation[] = [];
    const startAnimationsGroup2: Animation[] = [];

    // Update visibility of the status widget before starting; it could have
    // disappeared due to certain settings, and in some of these cases it
    // needs to reappear before loading animation begins.
    startAnimationsGroup0.push(
      this.getUpdateStatusWidgetVisibilityAnimation(true));

getUpdateWidgetStateAnimation(): TimelineMax {
    const updateScoreCompletedTimeline = new TimelineMax({
      onStart: () => {
        this.ngZone.run(() => {
          console.debug('Starting animation for getUpdateWidgetStateAnimation');
        });
      },
      onComplete: () => {
        this.ngZone.run(() => {
          console.debug('Completing animation for getUpdateWidgetStateAnimation');
          this.scoreChangeAnimationCompleted.emit();
        });
      }
    });
    if (this.loadingIconStyle === LoadingIconStyle.CIRCLE_SQUARE_DIAMOND) {
      console.debug('Update widget state for default style');
      updateScoreCompletedTimeline.add(
        this.getUpdateStatusWidgetVisibilityAnimation(false));

test(entry, node) {
    return new TimelineMax().staggerFrom(
      node.querySelectorAll('h2, p, a, pre'),
      1,
      { opacity: 0, y: '+=50' },
      0.1
    )
  }

useEffect(() => {
    tl.current = new TimelineMax().fromTo(
      el.current,
      0.1,
      { opacity: 0 },
      { opacity: 1 }
    );
  }, []);

0.7,
                { attr: { x1: center + xOffset, y1: center + yOffset }, ease },
                { attr: { x1: X, y1: Y }, ease },
                "-=0.5"
            );

            if (i >= offset) {
                const transformOrigin = `${xPercent >= 0 ? 0 : 100}% ${yPercent >= 0 ? 0 : 100}%`;

                timeline.fromTo(path, 0.5, { rotation: 0 }, { rotation: 90 * (j / 10), transformOrigin, ease }, "-=0.7");
            }

            timelines.push(timeline);
        }

        this.timeline = new TimelineMax({ delay, repeat, repeatDelay, onStart, onComplete, onRepeat });
        this.timeline.add(timelines);
    }

open = () => {
        const timeline3 = new TimelineMax();
        timeline3.fromTo(
            this.wrapper,
            3,
            { willChange: "opacity", opacity: 0 },
            { opacity: 1 }
        )

        this.images.forEach((img, id) => {
            const timeline = new TimelineMax();
            const timeline2 = new TimelineMax({ delay: 2 });

            timeline.fromTo(
                img,
                2,
                { transformPerspective: 500, y: 1000 - 100 * (8 - id), rotationX: (id + 1) * -5, z: 0, scale: 1 },
                { y: 0, rotationX: 0, z: 0, scale: 1 }

slideDown = () => {
		if (!this.state.isCollapsed) {
			this.hidePoster();
			return false;
		}

		this.setState({ isCollapsed: false });
		const ratio = this.props.fullhd ? 2.35 / 1 : 840 / 475;

		const timeline = new TimelineMax();

		timeline
			.set(this.videoJsBox, { opacity: 0 })
			.add(() => this.video.removeAttribute('poster'))
			.add(this.hidePoster())
			.to(this.playerBox, 0.3, {
				height: !isPad() ? this.playerBox.offsetWidth / ratio : undefined,
				ease: Cubic.easeOut
			})
			.to(this.videoJsBox, 0.3, { opacity: 1 }, '-=0.3');

		return true;
	};
	slideUp = () => {