[Creating a reveal animation without using a mask / cover?]

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!

[Creating a reveal animation without using a mask / cover?]

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?

[Creating a reveal animation without using a mask / cover?]

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