JoseCordova

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.

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

@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.

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?

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

@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. https://codepen.io/meatjasenmp/pen/pogxVZg

I was using this as an example: https://codepen.io/GreenSock/pen/OJJwEpq?editors=1010 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?

@ZachSaucier Thank you!!

@ZachSaucier I think I'm getting there. https://codepen.io/meatjasenmp/pen/MWaBPyj?editors=1011 Now I need to figure how to loop back to the first word after it's complete. Thanks again for pointing me in the right direction. I may be doing it the hard way but I'm using a combination of both suggestions.

@ZachSaucier Duh. Thanks buddy, I'm going to see if I can figure this out. There is a ~70% chance I'll be back with more questions.

@ZachSaucier I think it does, one question. Can you point me to the documentation for the 'end' parameter? I can't seem to find it. gsap.to(arcTwo, 3, { end: 360, ease: 'none', onUpdate: updatePath, repeat: -1, repeatDelay: 0.25, yoyo: true });

@ZachSaucier I'll be the first to admit that I'm pretty clueless about this part of my animation, with that being said can you expand on that? Do you mean the second clip path would be rotating in the opposite direction? And how would that work, seeing as I have to assign a specific clip path for each element in the example I have?

hi @ZachSaucier Here is a visual of what I'm trying to accomplish. As you can see, it's not quite there yet. https://codepen.io/meatjasenmp/pen/MWaBPyj?editors=1010 Basically, I want a word to be revealed, and while it's being revealed I want the previous word to be 'wiped'.

Actually, I'm thinking this will work perfectly. Any thoughts, comments would be appreciated. Thanks!

I'm going to attempt to recreate this effect: https://2019.lesanimals.digital/en in GSAP. I'm assuming my best bet would be a wipe. As you can see in the CodePen embed, at the line's rotate at the end of the timeline. Right now the 'community' text is visible. But I'd be looking to reveal the text when the lines rotate. My idea is to create some type of circular wipe but I'm not quite clear on how I should approach this beyond animating a mask. There are three sets of text (community, ingenuity, and honesty). Ideally the text underneath will be revealed when the transition/wipe occurs. So if I was to transition from 'honesty' -> 'ingenuity' - the honesty text would 'wipe out' and the ingenuity text would 'wipe in' so that the ingenuity text would become visible as the honesty text was becoming invisible. I'm not sure how clear I'm being, but I'd be happy to clarify. Thanks in advance!