Dunk

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.

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.

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.

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?

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

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