GSAP Timeline Example

[Deleted user]

Hi there,

How Would a GSAP timeline be implemented?

I tried something like this but the timeline only played on the first transition.

const transitions = [

	{
		from: '(.*)',
		to: '(.*)',
	  	out: (next) => {

			let tlPageTransitionOut = new TimelineMax({

				onComplete: next
			});
			tlPageTransitionOut
			.to(targetOne, 0.1, { /* Do Something */ }),
			tlPageTransitionOut.reverse();
			tlPageTransitionOut.play();
	  	},		  
	  	in: function(next) {

			let tlPageTransitionIn = new TimelineMax({

				onComplete: next
			});
			tlPageTransitionIn
			.to(targetOne, 0.1, { /* Do Something */ }),
			tlPageTransitionIn.reverse();
			tlPageTransitionIn.play();
			
	  	},
	}
];

Thanks for your patience! :)

[pixelmachine]

Next is a function so you should change lines onComplete: next to onComplete: next().

[gmrchk]

Hey 👋

actually I don't think @pixelmachine is correct. Calling next() would trigger the next step right away. It seems like your timeline just doesn't finish in the in step.

However, this is a question for GSAP guys, so I can't really help.

[gmrchk]

Just remembered there is this thread #2. Maybe a buggy version of gsap?