GSAP target undefined not found

[whizzbbig 12 Likes (Newbie)]

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

 

 

[Cassie 5,407 Likes (Superhero)]

Hey there!

I'm not that familiar with vite or prismic I'm afraid, but I assume you're trying to target something before it's in the DOM?

If you can pop together a minimal demo on codesandbox for us we'll take a look for you.

 

Thanks!

 

[whizzbbig 12 Likes (Newbie)]

On 3/6/2022 at 11:34 PM, Cassie said:

Hey there!

I'm not that familiar with vite or prismic I'm afraid, but I assume you're trying to target something before it's in the DOM?

If you can pop together a minimal demo on codesandbox for us we'll take a look for you.

 

Thanks!

 

Sorry for the delay was making the another prismic repo for the demo here's the DemoLink Thanks for the help 🙏

[OSUblake 18,495 Likes (Superhero)]

Do you have a minimal demo? Even with one, this doesn't appear to a GSAP issue. I would suggest trying to log out if the spans are even there before you go digging into GSAP.

 

Ex...

console.log("spans", this.elements.titleSpans)

 

If it's null, not a proper selector, element, or node list/array of elements, then the issue is somewhere else in your code.

 

[whizzbbig 12 Likes (Newbie)]

6 hours ago, OSUblake said:

Do you have a minimal demo? Even with one, this doesn't appear to a GSAP issue. I would suggest trying to log out if the spans are even there before you go digging into GSAP.

 

Ex...

console.log("spans", this.elements.titleSpans)

 

If it's null, not a proper selector, element, or node list/array of elements, then the issue is somewhere else in your code.

 

yes thanks for the help !