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

const attachTimeline = () => {
    const $modal = modalRef.current;
    const $modalDialog = modalDialogRef.current;

    let forward = true;
    let lastTime = 0;

    // Attach timeline to each instance
    $modal.timeline = new TimelineMax({
      paused: !open,
      onStart: () => {
        $modal.classList.add(config.classes.open);

        onStart();
      },
      onUpdate: () => {
        const newTime = $modal.timeline.time();
        if (
          (forward && newTime < lastTime) ||
          (!forward && newTime > lastTime)
        ) {
          forward = !forward;
          if (!forward) {
            onReverseStart();

attachTimeline = () => {
    const $body = document.body;
    const $cover = this.cover;

    let forward = true;
    let lastTime = 0;

    // Attach timeline to each instance
    $cover.timeline = new TimelineMax({
      paused: !this.props.open,
      onStart: () => {
        $body.classList.add('cover-open');
        $cover.classList.add(UtilitySystem.config.classes.open);

        // Fire off prop update
        if (this.props.onStart) this.props.onStart();
      },
      onUpdate: () => {
        const newTime = $cover.timeline.time();
        if ((forward && newTime < lastTime) || (!forward && newTime > lastTime)) {
          forward = !forward;
          if (!forward) {
            // Fire off prop update
            if (this.props.onReverseStart) this.props.onReverseStart();

$tooltipContent.classList.add('tooltip-inner');
    $tooltipContent.classList.add(`tooltip-inner--${this.props.type}`);

    const tooltipContent = this.props.content;

    // If tooltip content is valid HTMl (wrapped in object), convert to HTML and inject
    $tooltipContent.innerHTML = typeof tooltipContent === 'object' ? ReactDOMServer.renderToStaticMarkup(tooltipContent) : tooltipContent;

    $tooltip.appendChild($tooltipContent);
    // Set placement as parameter
    $tooltip.placement = this.props.placement;

    document.body.appendChild($tooltip);

    // Attach GSAP
    $tooltip.timeline = new TimelineMax({
      paused: true,
      onStart: () => {
        this.isTooltipOpen = true;
      },
      onReverseComplete: () => {
        this.removeTooltip($tooltip);
        this.isTooltipOpen = false;
      },
    });

    let transformOrigin;

    switch ($tooltip.placement) { // eslint-disable-line default-case
      case 'top':
        transformOrigin = 'center bottom';
        break;

componentDidMount() {
    const $toast = ReactDOM.findDOMNode(this.toast);

    // Adds in bottom spacing
    // Separating this out from timeline since we are using the `reverse()` to show the toast which adds in the alternate of the default props 💥
    const bottomSpacing = new TimelineMax({ paused: true })
      .to($toast, TOAST_TIMING, {
        marginBottom: (UtilitySystem.config.contentSpacing / 2),
        ease: UtilitySystem.config.easing,
      });

    let forward = true;
    let lastTime = 0;

    // Attach GSAP
    $toast.timeline = new TimelineMax({
      paused: true,
      onStart: () => {
        // Remove ottom spacing for stacked toast notifications
        bottomSpacing.reverse();

        $toast.setAttribute('aria-hidden', true);

        // Fire off prop update
        if (this.props.onStart) this.props.onStart();
      },
      onUpdate: () => {
        const newTime = $toast.timeline.time();
        if ((forward && newTime < lastTime) || (!forward && newTime > lastTime)) {
          forward = !forward;
          if (!forward) {
            // Fire off prop update

const attachTimeline = () => {
    const $reveal = revealRef.current;
    const $trigger = triggerRef.current;

    let forward = true;
    let lastTime = 0;

    // Attach GSAP
    $reveal.timeline = new TimelineMax({
      paused: true,
      onStart: () => {
        onStart();

        // Set initial height to `auto`
        $reveal.style.height = 'auto';
        // Add open class
        $reveal.classList.add(config.classes.open);
        // Toggle aria state
        $reveal.setAttribute('aria-hidden', false);
        // Add active class on trigger
        $trigger.classList.add(config.classes.active);
      },
      onUpdate: () => {
        const newTime = $reveal.timeline.time();

attachTimeline = () => {
    const $body = document.body;
    const $modal = this.modal;

    let forward = true;
    let lastTime = 0;

    // Attach timeline to each instance
    $modal.timeline = new TimelineMax({
      paused: !this.props.open,
      onStart: () => {
        $body.classList.add('modal-open');
        $modal.classList.add(UtilitySystem.config.classes.open);

        // Fire off prop update
        if (this.props.onStart) this.props.onStart();
      },
      onUpdate: () => {
        const newTime = $modal.timeline.time();
        if ((forward && newTime < lastTime) || (!forward && newTime > lastTime)) {
          forward = !forward;
          if (!forward) {
            // Fire off prop update
            if (this.props.onReverseStart) this.props.onReverseStart();

componentDidMount = () => {
    const $dropdown = this.dropdown;
    const $dropdownMenu = $dropdown.querySelector('.dropdown__menu');
    const $dropdownToggle = $dropdown.querySelector('.dropdown__toggle');

    let forward = true;
    let lastTime = 0;

    // Attach GSAP
    $dropdown.timeline = new TimelineMax({
      paused: true,
      onStart: () => {
        // Add active/open classes
        $dropdown.classList.add(UtilitySystem.config.classes.open);

        if ($dropdownToggle) {
          $dropdownToggle.classList.add(UtilitySystem.config.classes.active);
        }

        // Toggle aria state
        $dropdown.setAttribute('aria-expanded', true);

        // Fire off prop update
        if (this.props.onStart) this.props.onStart();
      },
      onComplete: () => {

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

		this.setState({ isCollapsed: false });
		const ratio = this.props.fullhd ? 2.35 / 1 : this.props.cut ? 1920 / 798 : 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: Power2.easeOut
			})
			.to(this.videoJsBox, 0.3, { opacity: 1 }, '-=0.3');

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

componentDidMount() {
    const $loader = this.loader;
    const $loaderPulses = $loader.querySelectorAll('.loader-pulse__pulse');

    $loader.timeline = new TimelineMax({
      paused: this.props.pause,
    })
      .staggerTo($loaderPulses, 0.25, {
        opacity: 1,
        repeat: -1,
        repeatDelay: 0.25,
        yoyo: true,
        scale: 1.25,
        ease: Linear.easeNone,
      }, 0.125, 'loader');
  }

componentDidMount() {
    const $loader = this.loader;

    $loader.timeline = new TimelineMax({
      repeat: -1,
      paused: this.props.pause,
    })
      .to($loader, 0.75, {
        rotation: '360deg',
        ease: Linear.easeNone,
      });
  }