Timeline loop delay

[Dunk]

So I'm using this readily available code to create a vertical text slider with eight div classes called "line" and text within each div.

 

All is working fine, except at the moment there's a slight delay before it loops back round to the start each time (after "Title 8").

 

I can't exactly work out why that is and how to fix it.

 

Any ideas?

 

				var line = $('.line');
	
				var tl = gsap.timeline({
				      onComplete: function(){
				        tl.restart();
				      }
				    });
				
				 
				TweenLite.defaultEase = Circ.easeInOut;
				
				var time = 0.9;
				var y = 100;
				
				tl
				  .add ( TweenMax.staggerFromTo (
				    line, time,
				      {
				        opacity: 0,
				        y:y,
				      },
				      { 
				        opacity: 1,
				        y: 0,
				      },
				    2 ))
				  .add ( TweenMax.staggerTo (
				    line, time,
				      {
				        delay: time,
				        opacity: 0,
				        y: -y,
				      },
				    2 ), 
				1.3)
			});

 

See the Pen BavbpbB by duncanarrow (@duncanarrow) on CodePen

[mvaneijgen]

Hi @Dunk welcome to the forum! 

 

That is some really old code you've got there! TweenMax is from GSAP version 2 and we're currently at version 3.12

 

 It sounds like you're looking for a seamless loop, this requires some elbow grease to get working, but luckily @Carl has a full tutorial on it! Hope it helps and happy tweening! 

 

 

[Dunk]

32 minutes ago, mvaneijgen said:

Hi @Dunk welcome to the forum! 

 

That is some really old code you've got there! TweenMax is from GSAP version 2 and we're currently at version 3.12

 

 It sounds like you're looking for a seamless loop, this requires some elbow grease to get working, but luckily @Carl has a full tutorial on it! Hope it helps and happy tweening! 

 

 

Thanks @mvaneijgen. I did look at the migration docs from 2 to 3 and it said that most of the legacy code will just continue to work. But to be honest I have no idea what I'm doing with GSAP and little time to learn yet something else new at the moment - I'll add it onto my to do list lol!

 

I appreciate you pointing me in the right direction.

 

Thank you

[GreenSock]

Are you trying to reproduce the original effect like this?: 

See the Pen oNJVqbe by GreenSock (@GreenSock) on CodePen

[Dunk]

10 hours ago, GreenSock said:

Are you trying to reproduce the original effect like this?: 

 

 

Thanks, yes but do you notice there's a slight delay after the 8th slide before it loops back round to the beginning again.

 

How do i get it as a smooth equal gap like between the other transitions?

[Rodrigo]

Hi,

 

@Carl created a blog post, demo and video showing how to achieve this with staggers:

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

See the Pen ExVEOPa by snorkltv (@snorkltv) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Dunk]

4 minutes ago, Rodrigo said:

Hi,

 

@Carl created a blog post, demo and video showing how to achieve this with staggers:

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

 

 

 

Hopefully this helps.

Happy Tweening!

Not quite. It's a different effect. The one I originally showed has the next title sliding up before the previous title has moved and is "bumping" the other one out of the way.

[Rodrigo]

If you inspect both examples you'll see that the only difference between Jack's example and Carl's example is the easing and duration of each instance, nothing more.

 

Jack's

animation = gsap.timeline({
  repeat: -1,
  defaults: {ease: "circ.inOut"}
}),

Carl's

let animation = gsap.timeline({repeat:20})

Carl's example is using the default easing function (power1.out).

 

Here is a fork of that codepen with the different easing function:

See the Pen qBLwOWa by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Dunk]

2 minutes ago, Rodrigo said:

If you inspect both examples you'll see that the only difference between Jack's example and Carl's example is the easing and duration of each instance, nothing more.

 

Jack's

animation = gsap.timeline({
  repeat: -1,
  defaults: {ease: "circ.inOut"}
}),

Carl's

let animation = gsap.timeline({repeat:20})

Carl's example is using the default easing function (power1.out).

 

Here is a fork of that codepen with the different easing function:

 

 

 

Hopefully this helps.

Happy Tweening!

Thanks for the fork but it's still not the same - with your latest one, both visible lines are moving at the same pace. Whereas on my original one, the second line moves before the first one has gone - hence the "bumping" or "nudging" effect.

[GreenSock]

If I understand your goal correctly, I'd take an entirely different approach. Don't use a timeline at all. Just use a recursive function that fires off tweens, and a delayedCall() to auto-advance: 

See the Pen XWoQpWJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[Dunk]

6 hours ago, GreenSock said:

If I understand your goal correctly, I'd take an entirely different approach. Don't use a timeline at all. Just use a recursive function that fires off tweens, and a delayedCall() to auto-advance: 

 

 

 

Does that help? 

Interesting. That's really good! As always with programming, multiple ways of achieving the same (or similar) results.

 

Shame I can't mark this answer as the accepted solution, as I think it's better than the one I initially marked.

 

Thank you - I appreciate the time you've spent on this.