How do I correct an error?(message 1: GSAP target not found warning. 2: GSAP target undefined not found.)

[Yomogi]

Hello everyone.

I am working on a WordPress site, using webpack while bundling modules into index.js, but I am unable to fix the errors, although I have tried several things for the errors.
I would be very grateful for any advice you could give me.
Thank you in advance.

I am using a translation tool as my English is not good. Please forgive me if some sentences are difficult to understand.

 

 

The following two are the target JavaScript files

//myScrollTrigger.js
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

/* --- 1 --- */
const [...arr] = document.querySelectorAll('.p-postList .p-postList__item');
if (arr.length !== null) {
  arr.forEach((elm) => {
    elm.classList.add('js-target');
  });
}


const parent = document.querySelector('.p-profile--skills__container'); 
if (parent) {
  parent.firstElementChild.classList.add('js-target');
}


/* --- 2 --- */
//NodeList
const columns = document.querySelector(
  '.p-page__strengths--intro__columns>.ark-block-columns__inner'
);
if (columns) {
  const [...array] = columns.children;
  console.log(array);
  array.forEach((child) => {
    child.classList.add('js-target-items');
  });
}



const FuncScrollBatch = (
  element,
  num = 3,
  text = 'Scroll Trigger is loaded.'
) => {
  console.log(`${text}`);
  const batch = ScrollTrigger.batch(element, {
    batchMax: num,
    onEnter: (batch) =>
      gsap.fromTo(
        batch,
        { autoAlpha: 0, y: 8 },
        { autoAlpha: 1, y: 0, duration: 1.2, ease: 'power4.out', stagger: 0.2 },
        '-=.4'
      ),
    once: true,
  });
  return batch;
};

const myScroll = FuncScrollBatch;
const jsTarget = document.querySelector('.js-target');
if (jsTarget) {
  myScroll('.js-target', 3);
}

const myScroll2 = FuncScrollBatch;
const jsTargetItem = document.querySelector('.js-target-items');
if (jsTargetItem) {
  myScroll2('.js-target-items', 1);
}

const FuncTimeline = (headline, media, text) => {
  const array = [headline, media, text];
  if (array.length !== null) {
    const tl = gsap.timeline();
    array.forEach((elem, index) => {
      if (index === 0) {
        tl.fromTo(
          elem,
          {
            autoAlpha: 0,
            y: 8,
          },
          {
            autoAlpha: 1,
            y: 0,
            duration: 1.2,
            ease: 'power4.out',
          },
          '+=3.2'
        );
      } else {
        tl.fromTo(
          elem,
          {
            autoAlpha: 0,
            x: -8,
          },
          {
            autoAlpha: 1,
            x: 0,
            duration: 1.2,
            ease: 'power4.out',
          },
          '-=.8'
        );
      }
    });

    return array;
  }
};
/* - Service - */
const headlineService = document.querySelector(
  '.p-page__strengths--intro__heading'
);
const textService = document.querySelector('.p-page__strengths--intro__text');
const mediaService = document.querySelector('.p-page__strengths--intro__media');

const myTimeline = FuncTimeline;

myTimeline(headlineService, mediaService, textService);

/* -- Works -- */
const headlineWorks = document.querySelector('.p-page__works--intro__heading');

const textWorks = document.querySelector('.p-page__works--intro__text');

const mediaWorks = document.querySelector('.p-page__works--intro__media');

const myTimeline2 = FuncTimeline;

myTimeline2(headlineWorks, mediaWorks, textWorks);

// export default myTimeline;
export { myScroll, myScroll2, myTimeline, myTimeline2 };

/* index.js */
import {
  myScroll,
  myScroll2,
  myTimeline,
  myTimeline2,
} from './myScrollTrigger';

myTimeline();
myTimeline2();
myScroll();
myScroll2();

 

The error message (in console)  is here. (Some excerpts are provided due to the length of the message.)

 

GSAP target null not found. https://greensock.com
GSAP target  not found. https://greensock.com

 

Both are listed as gsap-core.js: 92, and when opened
It is described as follows

 

    _warn = function _warn(message, suppress) {
  return !suppress && console.warn(message);
},

I understand that it is showing "target not found" or "not found" because the target is null. I am trying to figure out how to deal with this problem by looking at related topics, but no matter how much time I spend on it, I can't figure it out, so I would be very grateful if you could enlighten me. Thank you in advance.

[Cassie]

Hi there!

 

You're right in that you're targeting a null element.

The only way I can advise you to fix this is by stepping through your JS code slowly and console logging out your elements. It's likely you have a spelling error or some logic somewhere
 

let el = document.querySelector('.bad')

console.log(el) // returns null

// trying to tween an element that doesn't exist
gsap.to(el, {
  rotation: 360
})

// error
// "GSAP target null not found. https://greensock.com"

This isn't an issue with GSAP itself, it's due to passing GSAP an element that doesn't exist, so you'll need to fix the issue elsewhere in your code.

 

 

[Yomogi]

Hi Cassie.
Thanks for your reply.
As you said, the problem was not with the GSAP, but with the target element being returned as 'null'.
Thanks a lot.