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