How i can able to access the Properties of `beforeShow()` in `show()` function?

Question

In this code whenever i try to access the props of beforeShow() in show() function it shows undefined is there any way i can resolve this? and also i've been trying to animate the spans of title in show() and thats what i am trying to get in show(). this.elements.titleSpans i am trying to animate it. and also getting the error from GSAP like GSAP target not found or undefined. every time i try to log them in show() it shows undefined in the console. || I am a newbie i would like to have answered in this question i not understand a thing of the solution you mentioned in the private feedback. Please let me get help with this thing already its been weeks trying to solve the error :c.||

import GSAP from 'gsap';

import Page from '../classes/Page';

import { split } from '../utils/text';

export default class AboutPage extends Page {
  constructor() {
    super({
      element: '.about',
      elements: {
        title: '.about__title',
        description: '.about__description',
        content: '.about__content',
      },
    });
  }

  beforeShow() {
    super.beforeShow();

    this.elements.titleSpans = split({
      element: this.elements.title,
      expression: '<br>',
    });
  }

  show() {
    this.timelineIn = GSAP.timeline();
    this.timelineIn.fromTo(
      this.element,
      {
        autoAlpha: 0,
      },
      {
        autoAlpha: 1,
        duration: 0.4,
      }
    );

    if (this.elements.titleSpans === true) {
      this.timelineIn.fromTo(
        this.elements.titleSpans,
        {
          autoAlpha: 0,
          opacity: 0,
          y: '-50%',
          skewY: '-10deg',
        },
        {
          opacity: 1,
          autoAlpha: 1,
          duration: 0.4,
          y: '0%',
          skewY: '0deg',
          stagger: {
            amount: 0.1,
          },
        }
      );
    } else {
      console.log('There is no element like that');
    }

    return super.show(this.timelineIn);
  }

  hide() {
    this.timelineOut = GSAP.timeline();
    this.timelineOut.to(this.element, {
      autoAlpha: 0,
      duration: 0.4,
    });

    return super.hide(this.timelineOut);
  }
}

The file is being extended from Page.js

import Component from './Component';

export default class Page extends Component {
  constructor({ element, elements }) {
    super({
      autoMount: false,
      element,
      elements: {
        ...elements,
        images: 'img',
      },
    });

    this.components = [];
  }

  /**
   * Animations.
   */
  beforeShow() {
    if (this.elements.images) {
      if (!this.elements.images.length) {
        this.elements.images = [this.elements.images];
      }

      this.elements.images.forEach(image => {
        image.setAttribute('src', image.getAttribute('data-src'));
      });
    }
  }

  show(animation) {
    this.beforeShow();

    return new Promise(async resolve => {
      if (animation) {
        await animation;
      } else {
        console.warn(`Page doesn't have animation in set.`);
      }

      this.afterShow();

      resolve();
    });
  }

  afterShow() {}

  beforeHide() {}

  hide(animation) {
    this.beforeHide();

    return new Promise(async resolve => {
      if (animation) {
        await animation;
      } else {
        console.warn(`Page doesn't have animation out set.`);
      }

      this.afterHide();

      resolve();
    });
  }

  afterHide() {}

  /**
   * Events.
   */
  onMouseDown(event) {
    this.components.forEach(component => component.onMouseDown?.(event));
  }

  onMouseMove(event) {
    this.components.forEach(component => component.onMouseMove?.(event));
  }

  onMouseUp(event) {
    this.components.forEach(component => component.onMouseUp?.(event));
  }

  onResize(event) {
    this.components.forEach(component => component.onResize?.(event));
  }

  /**
   * Loop.
   */
  update() {
    this.components.forEach(component => component.update?.());
  }
}