Fade in fade out each text in an array sequentially, while also animating the container width

[hanjames]

Hi there, I want to animate each text of an array sequentially e.g. the first index should animate fade-in and then fade-out, continue to the next index and repeat the same animation, if it reached the end of array it will repeat the timeline, basically a looping animation.

 

At the same time I want to make the container animate its width based on the text inside, while animating the parent so it seems like smoothly slide to center no matter how long the animated text is.

 

Here I provide an example from this website https://www.cosmos.so/ in the hero section there's a paragraph "A pinterest alternative for [animated text]" 

 

This is the codepen of the element structure that I found on their website, it might give some additional context.

See the Pen WNLgYpZ by ryanfarhan00 (@ryanfarhan00) on CodePen

[mvaneijgen]

Hi @hanjames what have you tried your self already? We love to see what you can come up with, so that we can see your thought process and thus better help you understand the GSAP tools. Unfortunately we don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

But if you provide some GSAP code with something that is not working someone will surely point you in the right direction! Hope it helps and happy tweening! 

[hanjames]

@mvaneijgen Yes, I've already tried it out before, it's okay I just need to grasp the concept a little bit more.

 

Here's the snippet :

See the Pen zYyJeVL by ryanfarhan00 (@ryanfarhan00) on CodePen

[mvaneijgen]

Seems to work great! What do you need help with?

 

The only thing I can see, is that it is not a seamless loop. Check out @Carl's tutorial on that. Having loops is great (your current setup), but sometimes to get the logic correct it is better to write it out by hand, so that you can get a feel for how the loop should work, there is always time to optimise later. Hope it helps and happy tweening!