Infinite rotate text around shape

[Paper Tiger]

Does anyone know how to make this text infinitely loop around this shape?

See the Pen YzvJgLW by knynkwl (@knynkwl) on CodePen

[mvaneijgen]

Hi @Paper Tiger welcome to the forum!

 

You'll probably need the text on the path twice, then somehow need to find the magic offset number to have the letters of both textPath come in and leave at the same time. I think I've found it with 128.5%, I don't know if you could also use a pixel value, that would be more accurate in this case, but you'll somehow need to calculate the circumference of the oval shape, but math is not my strong suit 🙃

 

I have changed your first tween to animate once, and the next two tweens start at the same time (with the position parameter "<") and repeat infinitely. Don't know how fool prove this is, but it seems to work. Hope it helps and happy tweening! 

 

See the Pen YzvJbzO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

It seems that the preview in the embed on this forum differs from what I see on codepen it self. 

[Paper Tiger]

Thanks @mvaneijgen, yeah it's close but the flickering at the end is an issue. Also, we are looking to get the text always visible, not come in in the start.

[mvaneijgen]

16 hours ago, Paper Tiger said:

yeah it's close but the flickering at the end is an issue

 

Yes, that's why I explained, you somehow have to get the magic perfect value. Mine was close, but I don't have the time to test each and every value, I'll leave that quest in your hands 😀. It seems you can also use a numbered value instead of a percentage, maybe that will be even better. Here you can read more about startOffset https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/startOffset

 

16 hours ago, Paper Tiger said:

we are looking to get the text always visible, not come in in the start.

 

That's easy, just remove my first .from() tween. I had put that in, because your demo was also doing that. Good luck and happy tweening!

[akapowl]

 

Great Suggestion by @mvaneijgen to duplicate the text - when I read it I was just thrown off a bit by the 'magical number' you would have to find.

 

Looks to me like tweening one of the texts from 0% to 100% while tweening the other one of the texts from -100% to 0% would do just what I understood you had in mind @Paper Tiger

 

See the Pen eYKQvem by akapowl (@akapowl) on CodePen

 

 

 

Here's another fork where I just added another 'F SUITE' to both text elements to close the visible gap there.

 

See the Pen dyKQvjV by akapowl (@akapowl) on CodePen

 

[Paper Tiger]

Thanks @akapowl that is it!

[akapowl]

 

Awesome  

 

Here is a bonus tip:

in the latter of my codepens, the gap between the first and second text-elements ( between the first 'F' of one and the last 'Suite' of the other) is a bit smaller compared to the white-space between the individual 'F's and 'Suite's, but I think that's mostly related to how things are set up - to make it appear more even across the board you could just tune down the letter-spacing a bit, e.g. - I set it to 2.8px instead of 2.9px here:

 

[I only changed the fill-color to make clearer what I'm referring to.]

 

See the Pen MWXzmrm by akapowl (@akapowl) on CodePen