Having Some Trouble with Rotating Text

[JoseCordova]

I was using this as an example: 

See the Pen OJJwEpq?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

But my implementation isn't nearly as smooth in consistent, though I'm not sure why. I know the big differentiator is I'm animating svg paths rather than html text. Could that have something to do with it?

See the Pen JjGmJQb by meatjasenmp (@meatjasenmp) on CodePen.

[ZachSaucier]

Hey Jose. Your demo has a lot of code for that simple effect. Would you mind stripping it down to only the essential parts? It helps us help you. In doing so you might discover the issue yourself  

[PointC]

Yeah, editing that down would be great.

 

In answer to your question, the fact that you're using SVG paths shouldn't change things. You could also use SVG text if you like. They don't need to be converted to paths.

 

As Zach mentioned, you may discover the issue by simply stripping down the demo to the essentials.

 

Happy tweening.

 

[JoseCordova]

@ZachSaucier

@PointC

 

 

Sorry about that, the rotating text is a part of a much larger animation.

 

Here is a stripped down version w/ the rotating text only.

 

See the Pen pogxVZg by meatjasenmp (@meatjasenmp) on CodePen.

[JoseCordova]

Never mind, I'm dumb. I think I got it. Thank you gentlemen. I think I need nap.

[ZachSaucier]

I'm glad you got it figured out!

 

Some side notes:

• .out is the default ease, so you could just say 'power2'.
• You could use a shared class to avoid having to select each word individually using IDs.
• If you include your scripts at the bottom of the page, as is most common, you probably don't need the document.addEventListener('DOMContentLoaded', function(){ bit. Make sure to test in your production environment though  
• It's best to avoid having transforms on elements outside of GSAP - it's one of the most common GSAP mistakes. To do that with your SVG, just go into a vector editor and delete the transforms from the SVG markup panel. It should retain its position and compensate by changing the actual position values.

[JoseCordova]

Thanks @ZachSaucier

 

One quick question, you have any clever ideas to remove that obvious delay that happens when the animation cycles back to the first word?

[ZachSaucier]

3 minutes ago, JoseCordova said:

you have any clever ideas to remove that obvious delay that happens when the animation cycles back to the first word?

The issue boils down to the fact that for the animations after your first one, you have overlapping animations. Since by default that's not true when the whole thing loops, that causes the increased delay.

 

There are several ways to remedy that. Most commonly people duplicate the first word to the end and then when the animation loops, loop only the part after the first word is on screen. Does that make sense? I can help out if need be.

[JoseCordova]

@ZachSaucier

 

It sort of makes sense, but not enough for me to make practical use of the tip. Any help would be appreciated. One other thing I'm noticing. I'm positioning my timelines via labels and I'm finding that that causes a longer delay before the 'words' timeline repeats. Is there a clever way to get around that?

 

To clarify, the above is happening when I add the looping words timeline to my master timeline.

[JoseCordova]

I figured out the duplicate trick, thank you! Now if I can figure out the positioning issue.

[ZachSaucier]

Here's one approach:

See the Pen mdVzjRR?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

1 hour ago, JoseCordova said:

I'm positioning my timelines via labels and I'm finding that that causes a longer delay before the 'words' timeline repeats. Is there a clever way to get around that?

I'm guessing that won't be the case if you use my version. In general it's best to use the position parameter with timelines as it's more powerful.

[JoseCordova]

3 minutes ago, ZachSaucier said:

Here's one approach:

 

 

 

I'm guessing that won't be the case if you use my version. In general it's best to use the position parameter with timelines as it's more powerful.

I think yours may be a little more elegant than what I came up with, I really, really, really appreciate your time and help. Thanks a million.

[ZachSaucier]

Happy to help!

[PointC]

Another option in these situations is to put each element on its own timeline and start the repeat of the first one before the last one ends. Maybe something like this.

 

See the Pen OJMBEZX by PointC (@PointC) on CodePen.

 

Happy tweening.