I am trying to apply tweens to several elements into an array that I am looping though. I have created 4 timelines, two entrances and two exits for two sets of items. I am getting this error on the first timeline (assuming it would apply to all four) I can't use a codepen link because I am doing this in SL for a client. But I can at least post the source code. I assume there is something simple but I am just not seeing it.
const player = GetPlayer();
const menuOpen = player.GetVar('boolean_menuOpen');
const menu = document.querySelectorAll("[data-acc-text='TOC-Modal']");
const searchFor = 'TOC-Modal-Slide';
const accessibilityItems = document.querySelectorAll("[data-acc-text]");
const slides = [];
const menuReady = (bool) => { return bool; };
const slidesReady = (bool) => { return bool; };
const showButton = (bool) => { return bool; };
const menuEntrance = gsap.timeline({paused: true, defaults: { duration: 0.5, scaleX: 0, scaleY:0, opacity: 0, ease:"back.inOut(1.2)" } });
const menuExit = gsap.timeline({paused: true, defaults: { duration: 0.5, scaleX: 1, scaleY:1, opacity: 1, ease:"back.inOut(1.2)" } });
const slidesEntrance = gsap.timeline({delay: 0.1, paused: true, defaults: { duration: 0.25, scaleX: 0, scaleY:0, opacity: 0, ease:"back.inOut(1.2)" } });
const slidesExit = gsap.timeline({delay: 0.1, paused: true, defaults: { duration: 0.25, scaleX: 1, scaleY:1, opacity: 1, ease:"back.inOut(1.2)" } });
menu.forEach((item) =>
{
item.style.opacity = 0;
item.style.transformOrigin = 'center';
console.log(typeof item)
if(!menuOpen)
menuExit.to(item, { onComplete: menuReady, onCompleteParams: true });
else
menuEntrance.to(item, { onComplete: menuReady, onCompleteParams: true });
});
accessibilityItems.forEach((item) => { if(item.getAttribute('data-acc-text').includes(searchFor)) slides.push(item); });
slides.sort((a,b) => { const valueA = a.getAttribute('data-acc-text').split('-')[3]; const valueB = b.getAttribute('data-acc-text').split('-')[3]; return valueA - valueB; });
slides.forEach((slide) =>
{
slide.style.opacity = 0;
console.log(typeof slide)
if(!menuOpen)
{
slidesExit.to(slide, { opacity: 0, onComplete: slidesReady, onCompleteParams: true });
player.SetVar('boolean_menuAnimationComplete', false);
}
else
{
slidesEntrance.to(slide, { opacity: 1, onComplete: slidesReady, onCompleteParams: true });
player.SetVar('boolean_menuAnimationComplete', true);
}
});
if(menuReady && slidesReady)
{
if(!menuOpen)
{
menuExit.play();
slidesExit.play();
}
else
{
menuEntrance.play();
slidesEntrance.play();
}
}