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.

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.