Multiple line typewriter animation with looping final words

[SamStAubyn]

I have some text that is typed out, then on the end of the string I have an array of words that I want to indefinitely loop through, I feel like im very close but I cannot get the array to loop through more than once, how could I achieve this?

 

Bonus points if the cursor can actually align with the text as it is typing out.

 

This has now been edited to show the correct solution

See the Pen wvZvgrw by SamStAubyn94 (@SamStAubyn94) on CodePen

[mvaneijgen]

Hi @SamStAubyn, 

 

Had to restructure the HTML/CSS a lot to get it to behave some what and it still isn't perfect. I advise you to remove GSAP for now and just focus on CSS and get everything lined up like you want it to line up when the animation is playing. 

 

I've used @Carl "GSAP Staggers with Seamless Loops" logic, see video below for the looping effect and the main thing I've done in the JS is made separate timelines for each of the animations, so now the sentence can type in once and when it is done it will cal the word looping timeline.

 

 

I've changed a lot of tweens in to .from() tweens, sometimes it is so much more easy to animate .from() instead of .to(), certainly in this case because you want it to type .from() a string of '' (nothing) to what is already there, GSAP is smart and it will see what is the current content and just animates to that, no need to get the content yourself in JS. Hope it helps and happy tweening! 

 

See the Pen VwNwpeJ?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[SamStAubyn]

Thanks so much this is super helpful!

 

I tried approaching this a few ways, the final js code you see there is part my code, partly generated from a certain OpenAI tool. It got me close enough but the timing and ultimately final animation just wasn't what I'm after.

 

Will need to adjust the final looping animation as it's currently not staggering correctly but I'm sure this is something I can play around with and figure out.

[mvaneijgen]

Great it helps! 

1 minute ago, SamStAubyn said:

Will need to adjust the final looping animation as it's currently not staggering correctly but I'm sure this is something I can play around with and figure out.

Yeah, definitely! Check @Carl's tutorial he explains it really well what you can change and how that effects things. Happy tweening!

[SamStAubyn]

Hi @mvaneijgen,

 

On second look, I want the same animation style that is in the video at the end of the stagger, so I want the word to be completely deleted then the next one to be written in. At the moment it is typing out the next word before the first one has been removed if this makes it easier?

[mvaneijgen]

I think you can just set the position parameter of the second tween to duration instead of stagger and then it works. Feel free to post what you've already tried so we can take a look.

[SamStAubyn]

Perfect I just set the position parameter to the duration instead of the stagger and it has resolved the issue! Now to figure out this pesky alignment problem...

[SamStAubyn]

I solved the alignment issue by removing the display: gridand replacing it with display: inline-block