I've been working on a Vite Prismic project where I was trying to make a in page elements animation from one page to another I am getting this error when i try to get spans of title element of about page
the spans that i am trying to animate
code
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,
}
);
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,
},
}
);
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);
}
}
beforeShow() function is making spans in that title. it is complaining about this.elements.titleSpans