Hi, would someone mind helping me brainstorm this effect?

[JoseCordova]

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!

See the Pen LYpevoP?editors=1011 by meatjasenmp (@meatjasenmp) on CodePen

[JoseCordova]

Actually, I'm thinking this will work perfectly.

 

 

Any thoughts, comments would be appreciated. Thanks!

[ZachSaucier]

Feel free to let us know if you run into issues. But a minimal demo would make it much more likely that you get a quick response  

[JoseCordova]

hi @ZachSaucier

 

Here is a visual of what I'm trying to accomplish. As you can see, it's not quite there yet.

 

See the Pen MWaBPyj?editors=1010 by meatjasenmp (@meatjasenmp) on CodePen

 

Basically, I want a word to be revealed, and while it's being revealed I want the previous word to be 'wiped'.

[ZachSaucier]

10 minutes ago, JoseCordova said:

I want a word to be revealed, and while it's being revealed I want the previous word to be 'wiped'.

Sounds like you need two clip paths working opposite of each other then  Same basic approach.

[JoseCordova]

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

[ZachSaucier]

There's actually two ways you could go about it (I'm talking theory here):

1. Use two clip paths. One clip path hides content, the other reveals content that was originally hidden.
   In other words you start with two layers of content. One is fully visible at the start and uses a clip path animation to hide its content. The other starts with its content fully hidden by a clip path and then reveals it using a clip path animation. Make sense?
2. Still layer two sets of content but apply a background color (the same as your general background color) to the set of content on top. That way when you can still only use one clip path animation to reveal the content underneath but the original content is hidden by the background color. Make sense?

[JoseCordova]

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

1 minute ago, JoseCordova said:

Can you point me to the documentation for the 'end' parameter? I can't seem to find it.

That's because there are no docs for it  GSAP allows you to animate any object's properties. In this case you're animating arcTwo's end property.

[JoseCordova]

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

[JoseCordova]

@ZachSaucier

 

I think I'm getting there.

 

See the Pen MWaBPyj?editors=1011 by meatjasenmp (@meatjasenmp) on CodePen

 

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]

In order to loop it I think it'd be easier to use GSAP to actually set the clip paths values. That way you can just do repeat: -1 on the timeline. The easiest way to get GSAP to set the clip path values is to use MorphSVG plugin using the 90 degree, 180 degree, 270 degree, and 359.999 degree as the values. Here's how I'd set it up:

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

 

Notice that I changed your SVG so that the clip paths are no longer nested. I also duplicated the first set of words in order to loop properly since you can't change z-index in SVG very easily.

 

If I were doing this, I might generate the clip paths and duplicate of the first entry with JS so that whenever you want to add a new word you just add the SVG part and don't worry about the rest. But I didn't do that in the demo above  

[JoseCordova]

@ZachSaucier

 

Thank you!!

[ZachSaucier]

15 hours ago, JoseCordova said:

Thank you!!

Thanks for being a Club GreenSock member! We couldn't do what we do without people like you.