It was working normally on my local site using the task runner.
However, when I load it in wordpress, it stops working with the title error.
The order of loading in wordpress is not wrong and I am not sure why I am getting this error.
Please help.
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js' id='gsapjs-js'></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js' id='scrollTriggerjs-js'></script>
<script type='text/javascript' src='http://aaaa.local/wp-content/themes/aaaa/assets/js/gsap.min.js' id='js-gsap-js'></script>
Source code in question
ScrollTrigger.matchMedia({
"(min-width:1184px)": () => {
/**
* GSAPで横スクロール
*/
const listWrapperEl = document.querySelector(".tl-ItemList");
const listEl = document.querySelector(".tl-ItemList__container");
gsap.to(listEl, {
x: () => -(listEl.clientWidth - listWrapperEl.clientWidth),
ease: "none",
scrollTrigger: {
trigger: ".side-scroll",
start: "top top",
end: () => `+=${listEl.clientWidth - listWrapperEl.clientWidth}`,
scrub: true,
pin: true,
anticipatePin: 1,
invalidateOnRefresh: true,
},
});
gsap.utils.toArray(".js-parallax").forEach((wrap) => {
const y = -350; //wrap.getAttribute("data-y") || -300;
gsap.to(wrap, {
y: y,
scrollTrigger: {
trigger: wrap,
start: "center bottom",
end: "bottom center",
scrub: 3,
//markers: true
},
});
});
},
});
