Jump to content
Search Community

TypeError: CreateListFromArrayLike is called on non-object

DDINCBrent test
Moderator Tag

Go to solution Solved by DDINCBrent,

Recommended Posts

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();
	}
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...