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);
  }
}