[TypeError: CreateListFromArrayLike is called on non-object]

Nevermind, I figured it out. My onCompleteParams that were on my .to() calls were missing brackets.

[TypeError: CreateListFromArrayLike is called on non-object]

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

 

[EaselJS and Draggable]

Gotcha, well thank you for the update! Ill give your suggestion a try! Thank you!

[EaselJS and Draggable]

Just curious if Draggable now works with EaselJS and Canvas? I found a post from almost 7 years ago where the answer was no, but that was 7 years ago and now I know that GSAP 3 is compatible with EaselJS I even use it inside of Adobe Animate which I do a lot of programming in. But my issues is If draggable is compatible now I am not sure how I can target my movieclips. 

 

Draggable.create(Main.MorningTasks.getChildByName(Root.ScheduledTasks.Morning[i].text),
	{
		type:'x,y',
		bounds: Main,
		onClick: function()
		{
			console.log(Task.name);
		},
		onDragEnd: function()
		{
			console.log('Released ' + Task.name)
		}
					
});

Following the example on Draggable Plugin Page, what I have I think should be right. Just looking for some guidance, I love GSAP and would love to be able to use draggable as well. 

[Method similar to createjs.Tween.removeAllTweens()]

@ZachSaucier Thank you for the response! Is there somewhere I can go to see those little secrets about functions like that? I was looking at the Documentation for it and it doesn't mention using the asterisk. But once again thank you!  

[Method similar to createjs.Tween.removeAllTweens()]

I am currently working on a project- I have been using TweenJS. But I have fallen in love with versatility with GSAP. The only thing I am trying to figure out is if there is a similar function for GSAP that removes every instance of a tween like CreateJS createjs.Tween.removeAllTweens(); 

 

I have found myAnimation.kill(); but from what I can tell that is a per instance usage and I am looking for more of an overall function when I go to reset that would remove all tweens.