Timeline: onComplete, pass timeline to new class

[mr-parrott 2 Likes (Newbie)]

Hey Gsap!

I'm looking for a way to create a infinite loop but on every iteration it is a new animation based on a if statement. I had a repeat:-1 called in the timeline with 'random()' utils within the tween, now I'm starting to play around with alt variations on repeat and chose to go a class based function approach.

In the below code snippet I'm looking to pass the instance of timeline, I'm having a bit of trouble trying to find 'tl' onComplete to pass to a new class call

window.addEventListener("load", () => {
	let tl = gsap.timeline({
		onComplete: function () {
			new Anim(this); //how do I pass tl onComplete?
		}
	});
	let start = new Anim(tl);
});

 

thanks for your time!

See the Pen WNoERVE by mr-parrott (@mr-parrott) on CodePen

[akapowl 1,726 Likes (Superhero)]

 

Hey @mr-parrott

 

Would something like this work for you?

 

window.addEventListener("load", () => {

	function createNew() {
				
		let tl = gsap.timeline();
		tl.eventCallback("onComplete", createNew);
		
		new Anim(tl);		
		console.log(tl)
		
	}
	
	createNew();
	
});

 

 

See the Pen 69280b40e98c9947a89e48fe6587563d by akapowl (@akapowl) on CodePen

 

 

[ZachSaucier 6,606 Likes (Superhero)]

The repeatRefresh property can also be used for this sort of thing but you might need to restructure your code a bit to make use of it well.

[akapowl 1,726 Likes (Superhero)]

 

Also, for the future it would we great if you wouldn't apply suggested changes to the codepen you initially posted, but use the fork button instead and apply changes to a forked version of your codepen demo, so the context will remain intact for future readers of this thread, @mr-parrott