Creating a reveal animation without using a mask / cover?

[Maksiss]

Hi! 

I've been trying to make this work for a while, but all the relevant tutorials use some sort of a masking technique. And as you can see in the codepen, it's not appropriate here, because of the timeline gaps it creates. I can't put the timeline above the mask, because in the end I need it behind the label. Maybe I could juggle the z-indexes at the midpoint,  but that seems like more trouble than it's worth.

 

In the end this is what I'm trying to reveal. So just using from(x:200 /or/ width:0) wouldn't work here, since I want to get that painted on brush stroke effect. 

Any tips on how could I achieve this? 

Thank you!

 

 

See the Pen gOLaNea by maksiss3 (@maksiss3) on CodePen.

[ZachSaucier]

Hey Maksiss and welcome to the GreenSock forums. A clip-path or mask is definitely the way to go (really the only way to go unless your background color is a solid color in which case you could fake a clip-path or mask). You just need to make sure to apply the clip-path/mask to only the content that you want to be revealed, not the timeline line.

[Maksiss]

Thank you! Was not aware of how to properly use such a feature.

 

Another thing, if I may. I want to apply scrollTrigger to each element trough forEach loop. Is it possible to somehow access each elements pseudo? (Since I want to trigger it's animation first)

function largeFactTimeline(fact){

  let square = fact.CSSRulePlugin.getRule("::after"); 

}

 

Tried this, but it doesn't seem like that works. Any work around or will I have to try and transfer the pseudo element into the HTML?

[ZachSaucier]

1 minute ago, Maksiss said:

Is it possible to somehow access each elements pseudo?

Technically yes if you use the CSSRulePlugin. However, as stated in its docs, usually we recommend either using a "real" element (i.e. not pseudo-element) or animating a CSS variable instead. 

[mikel]

 

Hey @Maksiss,

 

Explored an option just for fun

 

See the Pen jOVbgVx by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

[Maksiss]

Tried doing something similar but with clipPath. And for some reason it is not working as intended. Is it a bug or not intended to work like that? 

See the Pen poNgEWO by maksiss3 (@maksiss3) on CodePen.

 

So thank you for the exploration @mikel, it's a perfect alternative!

[ZachSaucier]

It's not a bug, it's due to how browsers convey the clip-path information. In summary, they don't report the exact value you wrote, they report a shorthand which is ambiguous. So GSAP can't know the original value just from the rendered value.

 

With that being said you could use a .fromTo() instead in this case: 

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