GSAP Stagger loop

[celli]

Hi,

 

I am looping a series of GSAP staggers and I am running into an issue where it seems to flash the content on each new loop, when I increase the stagger amount.  Currently in my codePen I have a set to stagger: 0.02 and the loop is not noticeable at all, but when I increase the stagger to 0.2, then you can see when the timeline repeats it produces a flash of content and is not a smooth loop. 

Maybe it has to do with the way I am  referencing my splitTexts or the way I am staggering? I wonder if there is a better way--to avoid this flash of content when it is looping slower?

See the Pen PoLOxMY by celli (@celli) on CodePen

[PointC]

Yeah - with a longer stagger, you're gonna get a weird overlap like that because your words aren't the same length. The shorter word "time" is waiting to start rolling out until the prior one has animated in, but the one after "time" is again 7 characters and it starts animating in at the beginning of the rollout and this is causing problems.  A quick and dirty fix is just to make a little adjustment:

 

.to(chars4, {y: -80}, "<+=0.4")

The position change is just double the stagger since we have two fewer letters in the chars3 targets. This is just a band aid though and not flexible at all since you need to make some manual calculations.

 

I'd probably create a loop and calculate the duration() of each tween/timeline and set the position parameter accordingly.

 

Best of luck and happy tweening.  

See the Pen 3834e411d95e66f428b711e972a2d87f by PointC (@PointC) on CodePen

[celli]

Thank you PointC ! I see what you mean. As far as calculating the duration of each tween, how would I do that?

 

After I calculate the duration of each tween, then would I change the moment when each new tween starts? I thought if I started each tween right after the previous one ends, then I am basically calculating the time for the previous tween. I think I am missing something, hopefully you can shed the light.

[PointC]

Yeah - it's just hard to keep track since the start of one is based on the prior one, but that one is based on the end of the prior one etc... Kinda gets weird and hard to follow with different length words and tweens.

 

I think it might be easier to set this up in a loop and use yPercent to move the targets.  This could still present a few challenges though. Here's a fork of your demo with yPercent.

 

See the Pen 3edf621a86455b30dd00b80ed2d18174 by PointC (@PointC) on CodePen

 

It woks really well until the 'moment' characters start overlapping the 'time' characters. It's not a miscalculation as you can see that the 't' in time moves in unison with the 'm' in moment. The problem is the width of the m is wider than the first two letters in 'time' so it looks odd. A solution to that is adding a slight delay for the new word to move in like this.

 

See the Pen 81a43bf9e46371fbd730053644797add by PointC (@PointC) on CodePen

 

I think that works pretty well and the delay is a variable so you can adjust it to your liking.

 

To further illustrate what we're seeing with the Poppins font, I've switched the first demo to use a mono spaced font with no delay. You can see that everything works perfectly since all letters are the same width.

 

See the Pen 7ffb8c2abadabf74ee8e01ca0f2a3904 by PointC (@PointC) on CodePen

 

Since it's all created in a loop now, it's more flexible so you can add as many words as you want and it will all work correctly. You'll still need to manually add a duplicate of the first word to the bottom of the stack in the HTML with these demos, but you could also add some code to clone it if you prefer.

 

Hopefully this helps. Happy tweening  

[PointC]

Just FYI - your position parameters were correct in the initial demo. The overlap I saw was that font size rather than a weird overlap tween. The position parameter adjustment fix I posted would still work though.  My mistake - sorry about that. Weekend brain.

 

It should still be much easier in a loop and using yPercent. Happy tweening.  

[celli]

PointC, I see. As usual great explanations and fantastic demo, thanks a lot for the help 😁